组件的自定义事件
-
一种组件间通信的方式,适用于:子组件->父组件
-
使用场景:A 是父组件,B 是子组件,B 想给 A 传递数据,那么就要在 A 中给 B 绑定自定义事件(事件的回调函数在 A 中)
-
绑定自定义事件:
- 第一种方式
//在父组件中 <Demo @shijian="test"/> //或者 <Demo v-on:shijian="test">
- 第二种方式
//在父组件中 <Demo ref="demo"/> mounted(){ this.$refs.demo.$on('事件名',this.test) }
- 若想让自定义事件只能触发一次,可以使用
once
修饰符,或$once
方法。
-
触发自定义事件:
this.$emit('事件名',数据)
-
解绑自定义事件:
this.$off('事件名')
-
组件上也可以绑定原生 DOM 事件,需要使用
native
修饰符 -
注意:通过
this.$refs.demo.$on('事件名',回调函数)
绑定自定义事件时,回调要么配置在 methods 中,要么使用箭头函数,否则 this 指向会出现问题