组件的自定义事件

组件的自定义事件

1.作用

一种组件通信的方式，适用于：子组件=>父组件
子组件向父组件传递数据

2.使用场景

子组件想给父组件传数据，那么就要在父组件中给子组件绑定自定义事件（事件的回调在父组件中）

3.绑定自定义事件

​1.第一种方式，在父组件中：
<Demo @myway="test"/>
或
<Demo v-on:myway="text"/>
（myway为自定义事件的名称，test为回调）
2.第二种方式，在父组件中：
<Demo ref="demo"/>
......
mounted(){
this.$refs.Demo.$on('myway',this.test)
}
使用第二种方法可以更灵活，例如使用定时器让自定义事件延迟触发

注意：this.$refs.Demo.$on('myway',this.test)中的回调函数this.test要么是在methods中已经配置好的,用this使用；要么写成箭头函数

this.$refs.Demo.$on('myway',test(...)=>{ ... })

否则函数中的this会指向Demo的组件实例对象，而不是父组件的

3.若想要自定义事件只能触发一次，可以使用once修饰符，或$once方法(将$on替换为$once)

this.$refs.Demo.$once('myway',this.test)

4.触发自定义事件

在绑定事件的组件中配置一个method，当中要有这么一句，用于触发自定义事件myway

this.$emit('myway',要传的数据)

若要传的数据为多个，直接在后面加逗号继续传入

this.$emit('myway',this.num,333,999)

在父组件接收数据时，用...params来接受除第一个以外的数据，会以数组的形式储存

getnum(num,...params){
......
console.log('父组件收到数据',num,params);
}

5.解绑自定义事件

在绑定事件的组件中配置一个method，当中要有这么一句使用$off来解绑事件
解绑一个事件
this.$off("myway1")
解绑多个事件
this.$off(["myway1","第二个绑定事件"])
解绑所有事件
this.$off()

6.在组件上绑定原生DOM事件

组价上也可以绑定原生DOM事件，但需要使用native修饰符，来表示这不是自定义事件，否则识别为自定义事件，没有配置该事件则会报错undefined

<Demo @click.native="test" />