vue2 组件的自定义事件

1.一种组件通信的方式，适用于子组件->父组件

2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）

3.绑定自定义事件

  1.第一种方式：

   

  <!-- 通过父组件给子组件绑定一个自定义事件实现  子给父传值   v-on   @   绑定自定义事件  -->
    <!-- <MyFooter slot="footer" :todo="list" v-on:checkAll="checkAll" @clearDone="clearDone"/> -->

2. 第二种方式：

   

  <!-- 组件绑定原生事件，可能会按照自定义事件来处理，需要加上.native 修饰符，来变成原生事件 @click.native="click" -->
         <MyFooter slot="footer" :todo="list"  :clearDone="clearDone" ref="foot" />


 this.$refs.foot.$on('checkAll',(value)=>{

             console.info(this)
               this.list.map((item)=>{
                    item.done = value
                    return item
                })
         }) 

3.若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法

4.触发自定义事件  this.$emit(时间名，参数1，参数2....)

5.解绑自定义事件，this.$off() 全部解绑   this.$off([事件名1，事件名2])  this.$off(事件名)

5.组件上也可以绑定原生dom事件，需要使用native修饰符

6.注意：通过this.$refs.xxx.$on('checkAll',回调)绑定自定义事件，回调要么配在methods中，要么用箭头函数，否则this指向会出问题