目录
一、什么是组件的自定义事件
组件的自定义事件是一种组件间通信方式,它适用于:子组件 ==> 父组件
二、使用场景
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指向会出问题!!!