Vue组件的自定义事件

一种组件间通信的方式，适用于子组件==>父组件

01 - 基本使用

click,keyup,mouseover等都属于原生js事件，自定义事件指事件名称为自定义。

给谁绑的事件找谁触发。

通过在父组件中给子组件绑定自定义事件实现（事件的回调在父组件中）：子组件给父组件传递数据，不再需要父组件给子组件传递函数类型的props。

02 - 绑定自定义事件

父组件：

给子组件绑定自定义事件，两种写法 ：

一种使用@（v-on:）直接给子组件标签绑定，另一种通过给子组件添加ref属性，在mounted中获取组件实例，调用$on()绑定（更灵活）

//第一种，属性值addTodo为回调函数，存在父组件
<Header @addTodo="addTodo"/>
methods:{    addTodo(){}}
    
//或者第二种，给子组件添加ref属性，通过在mounted中获取组件实例，调用$on()绑定
<Header ref="header"/>
methods:{    addTodo(){}},mounted(){
    this.$refs.header.$on('addTodo', this.addTodo)
}

想让自定义事件只出现一次，可以使用once修饰符或者$once方法

子组件：

//触发组件实例上的自定义事件,todo为要传递的数据
this.$emit('addTodo', todo)

03 - 解绑组件自定义事件

给谁绑的事件找谁解绑。

解绑单个自定义事件：this.$off('自定义事件名')

解绑多个自定义事件（注意写数组形式）：this.off(['自定义事件名','自定义事件名2'])或者不传参this.off()时，会解绑该组件身上所有的自定义事件

组件实例被销毁时，该组件身上的所有自定义事件也被销毁

04 - 注意点

1.谁触发的组件自定义事件，该事件回调函数当中的this就是谁

2.组件实例想用原生DOM事件需要加事件修饰符.native（原生的，本来的）

3.通过this.refs.xxx.on('addTodo', 回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会有问题