Vue全局事件总线的$on的this指向问题

已于 2023-02-20 22:08:05 修改
阅读量197 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-02-20 22:05:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56640225/article/details/129132751
版权

​

将$bus绑定到Vue的原型上

​​vue原型绑定$bus

能这样操作的原因是因为vue的一个重要内置关系

vueComponent.prototy.proto==vue.proto

在发送数据的组件中调用$emit触发事件

发送数据组件中调用$emit

在接收数据的组件中 调用$on绑定事件

​接收组件中调用$on

注意这里使用箭头函数的原因是$bus是一个新的vue实例，而非当前组件，所以要想修改当前组件中的DefaulImg数据需要更改this。而箭头函数中的this是上下文的this，故能满足需求

跳起来欢呼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue事件总线：this.$bus.$emit与this.$bus.$on
skysys的研究小屋
01-15 1万+
1.创建Vue实例 //main.js Vue.prototype.$bus = new Vue(); 2.发射事件 //GoodsList this.$bus.$emit("aaa") 3.监听事件 //home.vue this.$bus.$on("aaa",()=>{ this.$refs.scroll.scroll.refresh() }) 4.示例：监听图片加载 //GoodsListItem.vue <template> <img :src="showImag
$on内部this指向
liu12333322的博客
08-09 232
$on内部this指向
[VUE中的全局事件总线]
weixin_45817735的博客
04-11 611
vue中的全局事件总线原理以及使用的方法，并举有例子，欢迎指点
vue 全局事件总线 理解与应用
小白成长记
06-07 305
全局事件总线：任意组件间通信。需要满足的条件： 1. 所有组件（VC）都能看到x组件 2. 可以调用$on、$off、$emit
使用this调用vue中定义的，data中数据或methods中的方法，报错undefined的原因及解决办法
qq_45634989的博客
08-18 6026
使用this调用vue中定义的，data中数据或methods中的方法，报错undefined的原因及解决办法
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
10-18
今天小编就为大家分享一篇解决Vue.js父组件$on无法监听子组件$emit触发事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue bus.$emit触发第一次$on监听不到问题
10-15
主要介绍了解决vue bus.$emit触发第一次$on监听不到问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中 this.$set的用法详解
10-16
主要介绍了vue中 this.$set的用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-geb-使用Observables的全局事件总线。-Vue.js开发
05-27
Vue-geb-全局事件总线Vue-geb是vue全局事件总线插件，可利用可观察对象的功能帮助在整个应用程序中广播事件。 仅添加5个Vue-geb-全局事件总线Vue-geb是一个vue全局事件总线插件，可利用可观察对象的功能帮助在应用...
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
01-21
之前使用组件，并不是很频繁，是水平的问题，目前工作中，公司大佬带着我手写过一个组件，再此很感谢他的指导。目前简单的组件已经有了自己的逻辑思维，正在从低级码农向中级码农蜕变。废话不多说。上图看看组件情况...
Vue3 全局事件总线 Vue.prototype.$bus = this , $on $emit $off 绑定与使用
qq_36164225的博客
09-01 1516
原因：由于Vue3中的mian.js文件中，已经不提供Vue2的挂载方式， Vue.prototype.$bus = this解决：需要使用第三方库 EventBus。
箭头函数this的指向问题求问
weixin_51392724的博客
01-13 53
js箭头函数求问
vue实例的$on和$emit的使用？
m0_50441807的博客
11-03 1383
实际开发中最常用的就是，父组件传递给子组件一个自定义事件，然后子组件通过。中添加一个全局vue实例，使每个组件注册和调用事件都使用这个vue实例；进行调用，好处是父子组件或者兄弟组件，都可以通过这种方式进行通信；注册的事件，无论是在哪个组件中，在该vue实例下都可以通过。"子组件A触发了, 接受到子组件B的参数为：""子组件B触发了, 接受到子组件A的参数为："进行调用，这样就可以实现兄弟组件间的通信了；中就有了这个事件，那么任意组件中都可以通过。// 触发子组件B的事件。// 触发子组件A的事件。
【Vue全局事件总线详解】
小田是个程序员的博客欢迎你的到来呀~
04-05 1万+
全局事件总线是一种组件间通信的方式，适用于任意组件间通信。全局事件总线并不是插件，配置文件等等，事件总线是程序员在做Vue开发中总结积累的一套方法，是一套规则，只要满足这套规则，就可以实现组件间的通信。
eventBus在vue中的使用
热门推荐
Annie的博客
07-01 2万+
在全局定义，全项目通讯
关于vue中bus中央数据总线传值的坑
逢山鬼泣的博客
11-17 1555
官网这个方法是非父子组件之间的传值，用了之后才发现父子组件其实也可以用this.bus.$emit('xxx',data) 和 this.bus.$on('xxx',(data)=>{}) 。但是在用这个传值方法的时候发现一个问题，尤其是在父子组件之间用的时候，从一个组件中使用$emit触发事件之后，另一个组件的监听事件$on不生效，官网的意思就是使用bus传值的时候，$on一定要在$emit事件触发之前就要创建，否则在触发$emit事件的时候，$on是监听不到的(因为这个时候$on压根就没有创建)
vue的事件总线不能直接this.$emit?
weixin_39238520的博客
09-14 107
接受方如下： 发送方如下： 结果是点击之后，接收方收不到 上图此时状态已变，但是无法打印 解决，重新new一个bus=new Vue()，挂到vue.prototype上，通过this.bus.emit()和this.bus.emit()和this.bus.emit()和this.bus.on(‘事件’,msg => {})即可使用 ...
Vue快速入门二：Vue绑定事件、Vue中的this指向、增加class选择器、动态创建标签
YY的博客
11-19 1873
v-bind：动态绑定属性 v-if：动态创建/删除 v-show：动态显示/隐藏 v-on：click：绑定事件 v-for：遍历 v-model：双向绑定表单
vue中$refs、$emit、$on的使用场景
chaochao466的博客
09-28 2万+
1、$emit的使用场景 子组件调用父组件的方法并传递数据 注意：子组件标签中的时间也不区分大小写要用“-”隔开 子组件： &lt;template&gt; &lt;button @click="emitEvent"&gt;点击我&lt;/button&gt; &lt;/template&gt; &lt;script&gt; export default { data() { ...
vue3 事件总线 $on $emit
最新发布
06-01
Vue 3 中事件总线的实现与 Vue 2 中的略有不同，Vue 3 中使用了一个新的 API `createApp` 来创建应用实例，并且将事件总线的实现抽象成了一个单独的模块 `mitt`。 要使用事件总线，在组件中需要先导入 `mitt` 模块...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值