自定义事件学习

1、什么是自定义事件?

自定义事件顾名思义,就是我们自己定义的事件,事件的名称以及回调等都由我们自己设计实现。

2、自定义事件是干什么用的?
自定义事件是一种组件间的通信方式,适用于子组件向父组件传值。

3、自定义事件的代码实现:
【自定义事件学习】第一种方式:
父组件通过v-on定义自定义事件
v-on可以简写为@
例:v-on:demo="send"可以写为@demo="send"
父组件: App.vue:

子组件通过$emit向父组件传值
子组件:TestA.vue:

第二种方式:
通过ref属性拿到TestA组件组件的实例对象(vc),在组件挂载完成之后(mounted)使用this.$refs.组件名.$on('自定义事件名', 回调函数)完成对子组件自定义事件的绑定
父组件: App.vue:

子组件没有变化
子组件:TestA.vue:

一次性自定义事件:
v-on:事件名.once="XXXX" 或者 this.$refs.ref属性名.$once("事件名", 事件内容)

注意:由于是子组件向父组件传值,所以传值的动作在子组件中;父组件接收子组件的数据,所以绑定的动作在父组件中。
4、自定义事件解绑的代码实现:
父组件没有变化,子组件中通过$off解绑自定义事件
子组件:TestA.vue:

注意:
如果要解绑多个事件,this.$off(["demo1","demo2"...]);
如果this.$off中不传递任何参数,那么此组件绑定的所有自定义事件都会解绑
总结:
自定义事件是实际开发工作中比较常用的方法,在进行某些操作时,使用自定义事件可以节省开发时间,减少代码冗余,提高工作效率。

    推荐阅读