Vue组件的自定义事件

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

基本使用

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

给谁绑的事件找谁触发。

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

绑定自定义事件

父组件：

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

//第一种，属性值addTodo为回调函数，存在父组件
<Header @addTodo="addTodo"/> 

methods:{
	addTodo(){}
}
   
    
//或者第二种
<Header ref="header"/> 

methods:{
	addTodo(){}
},
mounted(){
	this.$refs.header.$on('addTodo', this.addTodo)
}

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

子组件：

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

解绑组件自定义事件

给谁绑的事件找谁解绑。

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

解绑多个自定义事件：this.$off(['自定义事件名','自定义事件名2'])或者不传参this.$off()，解绑所有自定义事件

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

注意点

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

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

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