1、什么是自定义事件?
自定义事件顾名思义,就是我们自己定义的事件,事件的名称以及回调等都由我们自己设计实现。
2、自定义事件是干什么用的?
自定义事件是一种组件间的通信方式,适用于子组件向父组件传值。
3、自定义事件的代码实现:
【自定义事件学习】第一种方式:
父组件通过v-on定义自定义事件
v-on可以简写为@
例:v-on:demo="send"可以写为@demo="send"
父组件: App.vue:{{msg}}
子组件通过$emit向父组件传值
子组件:TestA.vue:
第二种方式:
通过ref属性拿到TestA组件组件的实例对象(vc),在组件挂载完成之后(mounted)使用this.$refs.组件名.$on('自定义事件名', 回调函数)完成对子组件自定义事件的绑定
父组件: App.vue:{{msg}}
子组件没有变化
子组件:TestA.vue:
一次性自定义事件:
v-on:事件名.once="XXXX"
或者
this.$refs.ref属性名.$once("事件名", 事件内容)
注意:由于是子组件向父组件传值,所以传值的动作在子组件中;父组件接收子组件的数据,所以绑定的动作在父组件中。
4、自定义事件解绑的代码实现:
父组件没有变化,子组件中通过$off解绑自定义事件
子组件:TestA.vue:
注意:
如果要解绑多个事件,this.$off(["demo1","demo2"...]);
如果this.$off中不传递任何参数,那么此组件绑定的所有自定义事件都会解绑
总结:
自定义事件是实际开发工作中比较常用的方法,在进行某些操作时,使用自定义事件可以节省开发时间,减少代码冗余,提高工作效率。
推荐阅读
- Nuxt.js-手写一个分页组件
- Vite入门从手写一个乞丐版的Vite开始(上)
- el-date-picker日期和时间范围无法选择时间的问题
- VUE 自定义指令实现点击后禁用elementUI按钮
- Vue3自制UI框架的技术总结
- 常见的 Monorepo 框架大比较
- Vue动态绑定背景图片及三元运算操作
- 我想写一个 Vue3 组件库,我该怎么开始()
- 7个 Vue3 中的组件通信方式