vue2x组件自定义事件

最新推荐文章于 2023-12-12 13:57:50 发布

WangL0101

最新推荐文章于 2023-12-12 13:57:50 发布

阅读量254

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45802907/article/details/121471828

版权

组件自定义事件

一种组件通信方式，适用于:子组件===>父组件
使用场景:A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件(事件的回调在A中)
绑定自定义事件
1. 第一种方式，在父组件中:<Demo @hello = “test”>或者
2. 第二中方式，在父组件中:
```
<Demoe ref = "demo">
mounted(){
    this.$refs.demo.$on("hello",this.test)
}
```
1. 若想让自定义事件只触发一次,可以用once修饰符，或者$once方法
触发自定义事件:this.$emit(“hello”,数据1,数据2,数据3)
解绑自定义事件 this.$off(“hello”)
解绑多个自定义事件:this. $o f f ([" 事件 1 ", " 事件 2 "]) 或者 t h i s .$ off() 解绑所有事件
组件上也可以绑定原生DOM事件，需要弄native修饰符
注意:通过this. $r e f s . x x x .$ on(“hello”,回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题
vue自定义事件名推荐使用 kebab-case 方式命名子组件接收的时候也要用kebab-case,因为事件名没有自动转换的功能，不会自动转换成驼峰
子组件中可以通过 $listeners 获取子组件收到的所有事件
利用 $l i s t e n e r s 可以不使用$ emit 去接收父组件传递的自定义事件，用的较少
可以利用 $listeners 将组件接受到的所有事件，一起全部传递给组件的子组件

关注