Vue-组件props属性再回顾

时间:2022-12-21 13:06:05
组件有自己独立的作用域!如果需要传递参数进入组件。需要通过props属性来声明。
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script src="js/vue.js"></script><style type="text/css"></style></head><body ><div id="todo-list-example">  <input    v-model="newTodoText"    v-on:keyup.enter="addNewTodo"    placeholder="Add a todo"  >  <ul>    <li          is="todo-item"      v-for="(todo, index) in todos"      v-bind:title="todo"      v-on:remove="todos.splice(index, 1)"    ></li>  </ul></div><script>Vue.component('todo-item', {  template: '\    <li>\      {{ title }}\      <button v-on:click="$emit(\'remove\')">X</button>\    </li>\                这种写法暂时不太清楚是怎么回事('<li>{{ title }}<button v-on:click="$emit(\'remove\')">X</button></li>'这样写也行)  ',  props:['title']  })new Vue({  el: '#todo-list-example',  data: {  title:'',    newTodoText: '',    todos: [      'Do the dishes',      'Take out the trash',      'Mow the lawn'    ]  },  methods: {    addNewTodo: function () {      this.todos.push(this.newTodoText)      this.newTodoText = ''    }  }})</script></body></html>