1、组件个人理解：
<组件>是页面的一部分，将界面切分成部分，每部分称为 <组件>
2、组件化思想：
//2.1、定义一个全局的组件，组件支持‘驼峰命名’规则
Vue.component("TodoItem",{
props: ['content'], //接收父组件传递过来的数据
template: "<li>{{content}}</li>"
})
循环遍历 list , 每一次遍历都把值给 item , item 再通过 v-bind 把值传递给 content ,
compoent 通过 props 获取传递过来的数据。
list 决定输出多少个 todo-item 组件
<ul>
<todo-item v-for="item in list" v-bind:content="item">
</todo-item>
</ul>
//2.2、局部组件
局部组建的使用，需要注册到 vue 父组件模版中
var TodoItem = { props:['content'], template:"<li>{{content}}</li>" } var app = new Vue({ el:'#app', components:{ TodoItem:TodoItem }, data:{ list:[], inputValue:'' }, methods:{ submit:function () { this.list.push(this.inputValue); this.inputValue = ''; } } });
//2.3、父组件向子组件传值
<todo-item v-for="item in list" v-bind:key="item"></todo-item>
通过 v-bind 即可实现父组件向子组件传值，子组件只需要通过 props:['key'] 即可获取父组件传递的数据
//2.4、子组件向父组件传值
1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。
vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn； var TodoItem = { props:['content','index'], template:"<li @click='handleItemClick'>{{content}}</li>", methods:{ handleItemClick: function(){ this.$emit("delete",this.index);//触发父组件 delete 绑定事件,index：为参数 } } } var app = new Vue({ el:'#app', components:{ TodoItem:TodoItem }, data:{ list:[], inputValue:'' }, methods:{ } });