1、组件个人理解：

 <组件>是页面的一部分，将界面切分成部分，每部分称为 <组件>

 

2、组件化思想：

         //2.1、定义一个全局的组件，组件支持‘驼峰命名’规则

 

Vue.component("TodoItem",{            props: ['content'], //接收父组件传递过来的数据            template: "
{
    {content}}
"    })     循环遍历 list , 每一次遍历都把值给 item , item 再通过 v-bind 把值传递给 content ,     compoent 通过 props 获取传递过来的数据。     list 决定输出多少个 todo-item 组件     
      
            
                   
           
      

//2.2、局部组件   局部组建的使用，需要注册到 vue 父组件模版中

var TodoItem = {    props:['content'],    template:"
{
    {content}}
"} var app = new Vue({    el:'#app',    components:{        TodoItem:TodoItem    },    data:{        list:[],        inputValue:''    },    methods:{        submit:function () {            this.list.push(this.inputValue);            this.inputValue = '';        }    }});

 

　　//2.3、父组件向子组件传值

 

    通过 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:"
{
     {content}}
",    methods:{         handleItemClick: function(){            this.$emit("delete",this.index);//触发父组件 delete 绑定事件,index：为参数        }    }} var app = new Vue({    el:'#app',    components:{        TodoItem:TodoItem    },    data:{        list:[],        inputValue:''    },    methods:{           }});