VUE学习笔记（2）：组件

组件组件，组件就是一个实例，实例的所有属性都可以实现。组件是可复用的 Vue 实例。

组件的注册（定义）：

全局注册：

Vue.component('my-component-name', {
  //组建名为my-component-name
  // ... 选项 （实例的所有属性，props属性定义获取父组件传参）...
})

局部注册：

var ComponentA = { /* 实例的所有属性 */ }


//使用
new Vue({
  el: '#app'
  components: {
    'component-a': ComponentA
  }
})

组件之间的传参：

父组件向子组件传参：

//全局组件
Vue.component('todo-item',{
    props:['content','index'],//声明组件时用props属性接收参数，props为数组，可以接收多个参数
    template:'<li @click="deleteItem">{{content}}</li>',
    methods:{
        deleteItem:function(){
        this.$emit('delete',this.index);
        }
     }
})


//在模板中使用
<ul>
   <todo-item 
     v-for="(item,index) of list"
     :key="index"
     :content="item"//v-bind(:)绑定需要传的参数，后面是值
     :index="index" 
     @delete="handleDelete">
    </todo-item>
</ul>

 子组件与父组件通信：

//全局组件
Vue.component('todo-item',{
    props:['content','index'],
    template:'<li @click="deleteItem">{{content}}</li>',//为元素绑定onclick函数
    methods:{
        deleteItem:function(){
            this.$emit('delete',this.index);//触发点击事件回传delete和index的值给监听器
        }
    }
})
//父组件中调用：
<ul>
 <todo-item 
      v-for="(item,index) of list"
      :key="index"
      :content="item"
      :index="index" 
      @delete="handleDelete" //绑定触发delete，注意要与上面$emit回传的第一个参数一致  
   >                         //handleDelete为父组件函数
 </todo-item>
</ul>