vue的事件总线不能直接this.$emit?

最新推荐文章于 2023-12-30 08:46:08 发布
最新推荐文章于 2023-12-30 08:46:08 发布
阅读量135 收藏
点赞数
分类专栏： 学习专用仅供参考 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39238520/article/details/120284880
版权
本文介绍了在Vue中遇到接收方收不到消息的问题时，如何通过创建新的bus实例并挂载到原型上，以便于Vue实例间高效地进行事件监听和发射。详细步骤包括new Vue()实例化、emit方法调用和on事件绑定。
摘要由CSDN通过智能技术生成

接受方如下：
在这里插入图片描述
发送方如下：
在这里插入图片描述
结果是点击之后，接收方收不到
在这里插入图片描述
在这里插入图片描述
上图此时状态已变，但是无法打印
解决，重新new一个bus=new Vue()，挂到vue.prototype上，通过this.bus. e m i t ( ) 和 t h i s . b u s . emit()和this.bus. emit()和this.bus.on(‘事件’,msg => {})即可使用

weixin_39238520
关注
专栏目录
Vue组件通信原理剖析（一）事件总线的基石 $on和$emit
没做过产品的后端不是个好前端
12-10 1386
首先我们先从一个面试题入手。 面试官问： “Vue中组件通信的常用方式有哪些？” 我答： 1. props 2. 自定义事件 3. eventbus 4. vuex 5. 还有常见的边界情况$parent、$children、$root、$refs、provide/inject 6. 此外还有一些非props特性$attrs、$listeners 面试官追问：“那你能分别说说他们的原理吗？” 我：[一脸懵逼]???? 下面我们就来一一看看他们内部的奥秘！ props 解决问题：父给子传值 // ch
Vue全局事件总线的$on的this指向问题
qq_56640225的博客
02-20 233
在做项目时遇到了全局事件总线$on绑定事件的this指向问题，以下是我的理解，记录一下 欢迎指正
Vue中事件总线eventBus的使用-发布订阅者模式，用于定义全局事件，实现非父子组件相互调用方法或传值——$on-监听事件订阅函数、$emit-发布事件发布函数、$off-销毁事件取消订阅
weixin_44867717的博客
07-06 1765
事件总线
vue-bus使用遇到的坑
青春不打烊的博客
05-12 1040
在使用vue-bus进行兄弟组件的数据传递过程中，遇到的问题，及解决方案 问题：vue中eventbus被多次触发，在this.$on监听事件时，内部的this发生改变导致，无法在vue实例中添加数据。 当我们从A页面跳转到B页面中的时候发生了什么？首先是B组件created 然后beforeMounted接着A组件才被销毁，A组件才仔细beforeDestory，以及destoryed。然后B组件再执行mounted。 所以我们可以把A页面组件中的emit事件放到beforeDestory里，因为这个时
如何在Vue.js中使用$emit进行组件通信
最新发布
bxstephen的专栏
12-30 1014
在Vue.js中使用$emit进行组件通信。
解决vue bus.$emit触发第一次$on监听不到问题
10-15
在Vue.js开发中，父子组件通信是一个常见需求。Vue提供了多种方法实现组件间通信，其中Vue...以上知识点是解决bus.$emit触发第一次$on监听不到问题的关键所在，希望本文能对大家在Vue.js开发中遇到类似问题时提供帮助。
对vue.js中this.$emit的深入理解
10-18
总结起来，`this.$emit`在Vue.js中扮演着事件总线的角色，使得子组件能够通知父组件发生了什么，从而实现了组件间的通信。这种机制是Vue.js中实现组件解耦和灵活性的关键之一。理解并熟练掌握`this.$emit`，可以让你...
兄弟组件传数据:全局事件总线this.$bus.$emit/$on组件跳转过程多次发请求并且页面无法渲染的问题
qq_47530527的博客
03-30 2606
实现业务描述：有A和B两个组件要进行传一个哈希值，A组件获取哈希值后，需要跳转到兄弟组件B组件并且将哈希值传到B组件，具体代码如下图所示： A组件的逻辑 B组件的逻辑 问题描述：A组件中getContent事件只被emit触发了一次，但是B组件this.$Bus.$on中的回调函数却被执行了多次的现象。并且伴随着A组件与B组件跳转过程中回调函数被执行次数会依次增加。 产生原因：this.$Bus.$on实际是向Bus容器中添加一个事件监听器，当页面跳转时，原来的vue组件即A组件被注销，但.
vue 消息总线解耦 bus.$on(), bus.$emit(), bus.$off
qq_34581491的博客
10-31 634
bus 是一个 Vue 对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc.
关于vue中bus中央数据总线传值的坑
逢山鬼泣的博客
11-17 1662
官网这个方法是非父子组件之间的传值，用了之后才发现父子组件其实也可以用this.bus.$emit('xxx',data) 和 this.bus.$on('xxx',(data)=>{}) 。但是在用这个传值方法的时候发现一个问题，尤其是在父子组件之间用的时候，从一个组件中使用$emit触发事件之后，另一个组件的监听事件$on不生效，官网的意思就是使用bus传值的时候，$on一定要在$emit事件触发之前就要创建，否则在触发$emit事件的时候，$on是监听不到的(因为这个时候$on压根就没有创建)
Vue this.$emit和this.$on
小葵坤_易安的博客
08-06 1万+
1、解决第一次监听不到数据的方法 this.$nextTick() this.$nextTick(function () { this.$bus.$emit("yulan", row); }) setTimeout setTimeout(() => { //row 代表要传递的参数数据 this.$bus.$emit("yulan", row); }, 100); 2、子组件传值给父组件 子组件中使用$emit触发事件的值传出去，父组件通过事件监听，获
Vue事件总线（EventBus）、$on、$emit、$off
热门推荐
^_^
06-29 3万+
在之前我们只用过父传子，子传父进行传数据，这时候当组件嵌套比较深或比较复杂的情况，这时候就用到了事件总线 (EventBus) 如何理解事件总线呢，你可以理解为用来传输数据的一条线 一、使用EventBus 1. 创建事件总线 main.js // 创建事件总线 const bus = new Vue() // 把bus挂载到了Vue的原型上, 保证所有的组件都能通过 this.$bus访问到事件总线 Vue.prototype.$bus = bus 2.页面使用 发布事件 - 传...
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
vue：$emit失效
好幸运
08-18 2307
首先，这个问题很鬼畜，有说不能用驼峰的，这个我没遇到过 然后，我知道大家跟我一样很仔细的在排错，但是麻烦大家再仔细一点儿 因为我的这个错误是标点符号没有注意（特别父组件中，回调是@符号不是:） ...
Vue事件总线（EventBus）使用详细介绍
infotw的博客
07-16 4349
前言 vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？ 如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即 EventBus来通信。 Event...
this.$emit方法无效的原因
weixin_44294658的博客
08-04 2万+
this.$emit无效的问题 开发过程汇总突然遇到this.$emit无法将事件发布出去，原因查找发现是使用了驼峰命名法，导致方法不能被监听到。点击查看vue官方文档说明，最神奇的是并不是左右的emit都失效，只是有些emit的方法名在特定情况下失效。 解决方案 使用-连接，比如： this.$emit(‘my-method’); 使用this.$parent.方法名调用 ...
[vue] 全局事件总线 this.$bus.$emit this.$bus.$on ，可以实现任意组件间通信
qq_14993591的博客
11-09 5300
全局事件总线原理分析 前提：x是个组件，不属于任何一个组件 要求：A组件想要收到别的组件给的信息 在A组件里给x绑定个自定义事件demo,对应的回调函数就留在A中 D组件想给A传点数据，就可以这样做： 在D组件里，写点代码触发x身上的demo事件，并且传点数据过去（666）， x身上的demo事件被触发了，demo事件的回调函数就得执行，而这个回调函数在A组件里面，那之前D组件传的数据666，就在A组件里面 要求：B组件想收到点别的组件传的数据， 在B组件里写点代码，给x组件绑定个事件test,回调函
vue3 事件总线 emit
XKFC1的博客
04-15 2910
vue3 事件总线 emit
vscode提示属性在type中不存在？
weixin_39238520的博客
12-07 3107
Property ‘width’ does not exist on type ‘CombinedVueInstance<Record<never, any> & Vue, object, object, object, Record<never, any>>’.Vetur(2339) 问题描述：vetur插件报错 解决方式：
vue中 this.$eventHub.$emit 的用法
09-06
在 Vue 中，`this.$eventHub.$emit` 是一种通过事件总线进行跨组件通信的方式。通常情况下，我们可以通过创建一个事件总线实例，并将其挂载到 Vue 实例的原型上，以便在整个应用程序中访问。下面是一种常见的用法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值