VUE中使用bus传值时，接收页面多次触发接收方法的问题

最新推荐文章于 2023-12-12 08:59:41 发布

前端的南姐

最新推荐文章于 2023-12-12 08:59:41 发布

阅读量2.4k

点赞数 3

分类专栏： VUE

本文链接：https://blog.csdn.net/happygirlnan/article/details/97010531

版权

VUE 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

使用bus在兄弟组件间传递值时，可能会有多个组件监听通过bus传出的值。比如：

组件A的一个按钮事件中有这么一句：bus.$emit('getUnitId',data);组件B、C、D中监听接收。

在组件B中接收的代码如下

mounted(){

bus.$on("getUnitId", function(data){

console.log(data);

});

发现组件B中的 console.log(data) 被执行了多次。

解决：

每个监听这个bus事件的组件，按如下代码修改：

mounted(){

bus.$on("getUnitId", this.dealBusData);

methods:{

dealBusData(data){

console.log(data);

}

beforeDestroy(){

bus.$off('getUnitId',this.dealBusData);//组件销毁时关闭监听

还有一种问题是跳转时通过bus传递会存在的问题。之前也遇到过，参考链接：

https://www.jianshu.com/p/fde85549e3b0

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端的南姐

关注关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue组件兄弟组件的多次组件通信问题

weixin_52153452的博客

01-18

837

兄弟组件的多次数据共享

使用Bus第一次不能触发，以及多次打印和返回时保留数据

weixin_44986077的博客

12-09

1028

前端vue之间兄弟之间的传值用事件总线Bus 1.首先同main.js同级创建Bus.js import Vue from 'vue' export default new Vue() 2 在要传递的A组件中引入Bus A组件 import Bus from './../../Bus.js' look (row) { this.$router.push('/lookplace'...

1 条评论您还未登录，请先登录后发表或查看评论

vue组件中—bus总线事件回调函数多次执行的问题

weixin_30375427的博客

09-21

457

在利用vue组件进行事件监听时发现，如果对N个vue组件实例的bus总线绑定同一事件的回调函数，触发任意组件的对应事件，回调函数至少会被执行N次，这是为什么呢？为此，调研了普通对象的事件绑定和触发实现方式，参考：JavaScript实现自定义对象的自定义事件。其基本思想就是：设计一个原型对象，作为基类，其重点属性包括：一个_events对象数组属性，一个addEventListene...

解决Bus.$on多次接收的问题

weixin_39818813的博客

03-11

1037

在接收的vue文件中加个： // 解决$on接收多次的问题 beforeDestroy(){ Bus.$off("saveContentss") } methods: { // 点击保存按钮，提交填写好的简历 saveContentss(){ Bus.$on("saveContents", () => { console....

eventBus父组件$emit一次子组件多次收到￥

最新发布

qq_40663497的博客

12-12

224

eventBus踩坑，发送一次通知多次被接收

vue解决bus多次触发的问题

qq_16828495的博客

04-15

1238

子组件 <script> import Bus from './bus.js' export default { name: "children", methods:{ handleClick(){ Bus.$emit('open','的值') } }, }; </script> 父组件 <template> <children /> </template> <script&

Vue非父子组件之间传值

01-08

在这个例子中，`child`组件有一个`handleClick`方法，当这个方法被调用时，它会通过`bus`触发一个`change`事件，并传递当前的`copyContent`值。同时，在`child`组件的`mounted`生命周期钩子中，我们注册了一个监听器...

vue-router中使用EventBus传值需要注意到的问题

斩月的专栏

05-29

6136

vue 点击事件传递多个参数_vue 中传值（父传子、子传父（传递多个事件）、eventBus、）...

weixin_39673704的博客

12-29

3296

1.0 父传子父组件向子组件传值:子组件用props:['值'] 接收 ;2.0 子传父子组件向父组件传值：通过$emit事件传递// father.vue接收子组件传递过来的值{{msg}}// 引入的子组件export default {data() {return {msg: "默认值"};},created() {},components:{child:()=> import ('...

vue-bus，组件内接收的事件多次触发的原因

cherrylindan的博客

10-24

859

起因：今天做一个项目，首先有三个组件，分别是A,B,C， B是公用组件， A，C分别是两个页面的组件，在A页面bus传值正常，但是在C页面传值的时候时间触发一次， $on接收的事件就会叠加触发，后来才知道， bus传值之后要进行销毁，尤其是跳转页面进行使用的时候。废话不说贴代码如果在钩子函数created进行接收bus传递的值的话，好像页面怎么点击都不会触发，在mounted进...

VUE Bus事件中心触发多次问题

叫我起来，我还能敲代码！

06-08

872

当VUE兄弟组件传值时候用到bus事件中心，但是当A组件$emit时候，B在mounted接收（$on）。会触发多次。解决方法：当A组件需要传值得时候用Bus.$emit触发，然后在B组件mounted中先销毁$off再接收$on

Vue Bus 页面间传递参数

guoqingtai的博客

03-29

589

Vue BUS 页面间传递参数说明：可以用于多个页面之间，全局传递参数，比较好用。比如，提交表单页面关闭后，列表页面重新刷新页面，可以使用这样的方式。定义 BUS 创建/src/utils/vuebus.js import Vue from 'vue'; export default new Vue(); 发送和接受消息的页面引入vuebus import Bus from '@/utils/vuebus' 发送页面使用VUEBUS向外传递参数 Bus.$emit("PARAM_

Vue 事件总线多次触发

qq_43573843的博客

01-26

1993

提供数据 this.$bus.$emit('userDate',response.data.sysname) 接收数据 this.$bus.$on('userDate',(r)=>{ console.log("-----"+this.UserName) this.UserName=r console.log("-----"+this.UserName) }) 问题描述使用使用一个事件车(总线)的方式实现兄弟组件之间的通信，在接收数据时，当前组件获取到的数据一直未null 首先考虑是不是没有

VUE不同页面间通过Bus传递的值无法渲染到页面

qq_35392084的博客

09-02

1376

VUE不同页面间通过Bus传递的值无法渲染到页面

vue使用bus进行父子组件传值,以及解决bus多次触发的问题

qq_39024012的博客

06-10

1584

新建一个bus.js文件 // bus.js import Vue from 'vue' export default new Vue; 子组件 <template> <button @click="handleOpenModal"> </button> </template> <script> import Bus from './bus.js' export default { name: "children", methods:

vue组件间切换 this.$bus.$on会多次调用问题

weixin_44545815的博客

11-21

3072

this.$bus.$on 向容器添加了一个事件监听，当页面跳转时，原来的组件没有注销。事件监听不会被移除，再次进入该组件后又会向bus容器添加重复的事件监听器

eventBus 同级组件/多级组件之间传值问题解决

cuteyDan的博客

11-15

416

同级组件/多级组件之间传值问题解决：eventBus 1⃣️ 初始化：方法一：只创建实力方法，较轻便方法二：全局的事件总线直接在项目中的mian.js初始化EventBus： // main.js Vue.prototype.$EventBus = new Vue(); 使用总结： // 发送消息 bus.$emit(channel: string, callback(payload1,…)) // 监听接收消息 bus.$on(channel: string, callb

前端使用Bus组件进行跨组件传值

m0_49515138的博客

03-07

998

bus.js import Vue from 'vue' const Bus = new Vue() export default Bus 使用时要引用Bus import Bus from 'bus.js' this.$nextTick(()=>{//解决第一次·触发$emit无效的问题 Bus.$emit('data',123) }) beforeDestroy(){ //销毁监听事件 Bus.$off('data') } //显示模态框并更新组件绑定表单数据要放在mounted里面哦 B

vue用公共组件页面传值_使用全局 bus 在 Vue 的兄弟组件中简单传值（以及 this 重定向的 5 种方法）...

weixin_35851515的博客

12-24

505

总线传值有两种写法：原型bus写法【 window.Vue.prototype.bus = new Vue() 】、全局bus写法【 window.bus=new Vue() 】。如果使用了原型写法，那在组件里面必须使用 this.bus.$emit() 发送消息，以及使用 this.bus.$on() 接收消息。它们全部要用 this 开头。如果使用了全局写法，则可以简化为 bus.$emit(...

Vue EventBus的坑：多次触发与解决策略

"Vue.js 中的 Event Bus 多次触发问题及解决策略" 在 Vue.js 开发中，Event Bus 是一种常见的组件间通信方式，它通过创建一个全局的 Vue 实例来实现非父子组件间的通信。然而，如果不正确地使用，可能会导致事件被...