目录
一、什么是组件的自定义事件
组件的自定义事件是一种组件间通信方式，它适用于：子组件 ==> 父组件
二、使用场景
A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）
三、绑定自定义事件
1.第一种方式
在父组件中：
<Demo @someway="test"/> 或 <Demo v-on:someway="test"/>
案例：
在父组件中绑定一个自定义事件如下：
<Student v-on:someway="getStudentName" @demo="m1"/>在父组件的methods当中配置如下：
getStudentName(name,...params) {
console.log("App收到了学生名：", name,params);
this.studentName = name
},在子组件中绑定事件如下：
<button @click="sendStudentName">把学生名给app</button>在子组件的methods当中配置如下：
sendStudentName(){
//触发Student组件实例身上的‘someway’事件
this.$emit('someway',this.name,222,111,333)
},
2.第二种方式
在父组件中：
<Demo ref="demo"/>
......
mounted(){
this.$refs.xxx.$on('someway',this.test)
}
案例：
在父组件中绑定一个自定义事件如下：
<Student ref="student" @click.native="show"/>在父组件中配置生命周期函数如下：
mounted() {
//等待三秒钟后，获取实例对象并添加someway事件
// setTimeout(()=>{
// this.$refs.student.$on('someway',this.getStudentName)
// },3000)
//绑定自定义事件，触发一次之后就不能触发
// this.$refs.student.$once('someway',this.getStudentName)
this.$refs.student.$on('someway',this.getStudentName)
},在子组件中绑定事件如下：
<button @click="sendStudentName">把学生名给app</button>在子组件的methods当中配置如下：
sendStudentName(){
//触发Student组件实例身上的‘someway’事件
this.$emit('someway',this.name,222,111,333)
},
3.备注
若想让自定义事件只能触发一次，可以使用 once 修饰符，或 $once 方法
四、触发自定义事件
使用： this.$emit('someway',数据)
案例：
在子组件中绑定事件如下：
<button @click="sendStudentName">把学生名给app</button>在子组件的methods当中配置如下：
sendStudentName(){
//触发Student组件实例身上的‘someway’事件
this.$emit('someway',this.name,222,111,333)
},五、解绑自定义事件
使用： this.$off('someway')
案例：
在子组件中绑定事件如下：
<button @click="unbind">解绑someway事件</button>在子组件methods当中配置如下：
unbind(){
this.$off('someway')//解绑一个自定义事件
// this.$off(['someway','demo'])//解绑多个自定义事件
// this.$off()//解绑所有自定义事件
},
六、绑定原生DOM事件
组件上也可以绑定原生DOM事件，需要使用native修饰符
案例如下：
<Student ref="student" @click.native="show"/>
七、注意
通过this.$refs.xxx.$on('someway',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！！！