自定义事件学习前端vue.js

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中不传递任何参数，那么此组件绑定的所有自定义事件都会解绑
总结：
自定义事件是实际开发工作中比较常用的方法，在进行某些操作时，使用自定义事件可以节省开发时间，减少代码冗余，提高工作效率。