首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vue js非子父级与事件总线的通信不起作用

Vue.js是一种流行的前端开发框架,它提供了一种简洁、灵活的方式来构建用户界面。在Vue.js中,组件之间的通信是一个重要的话题。通常情况下,Vue.js的组件通信是通过父子组件之间的props和事件来实现的。但是,有时候在非子父级组件之间进行通信时,使用事件总线是一种常见的解决方案。

事件总线是一个Vue.js应用中的全局事件系统,它允许不相关的组件之间进行通信。通过事件总线,一个组件可以触发一个事件,而其他组件可以监听并响应这个事件。这种方式可以解决非子父级组件之间的通信问题。

在Vue.js中,可以使用Vue实例作为事件总线。首先,在Vue实例中创建一个新的Vue实例作为事件总线:

代码语言:javascript
复制
// main.js
Vue.prototype.$bus = new Vue();

然后,在需要通信的组件中,可以使用$emit方法触发一个事件,并传递数据:

代码语言:javascript
复制
// ComponentA.vue
methods: {
  sendData() {
    this.$bus.$emit('event-name', data);
  }
}

在接收数据的组件中,可以使用$on方法监听事件,并处理数据:

代码语言:javascript
复制
// ComponentB.vue
created() {
  this.$bus.$on('event-name', data => {
    // 处理数据
  });
}

这样,当ComponentA组件调用sendData方法时,ComponentB组件就会接收到数据并进行处理。

事件总线的优势在于它提供了一种简单而有效的方式来实现非子父级组件之间的通信。它可以减少组件之间的耦合度,提高代码的可维护性和可扩展性。

在腾讯云的产品中,与Vue.js相关的产品有云开发(CloudBase)和云函数(SCF)。

  • 云开发(CloudBase)是一款全栈云开发平台,提供了前端开发、后端开发、数据库、存储等一体化的服务。它可以帮助开发者快速搭建和部署Vue.js应用,并提供了丰富的云端能力和工具支持。了解更多信息,请访问腾讯云开发官网
  • 云函数(SCF)是腾讯云提供的无服务器计算服务,可以让开发者在云端运行代码,无需关心服务器的管理和维护。通过云函数,可以将Vue.js应用的后端逻辑部署到云端,并与前端进行通信。了解更多信息,请访问腾讯云函数官网

希望以上信息对您有所帮助。如果您对其他问题有疑问,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

vue中组件间通信方式总结

vue中组件间通信方式 方法一、props/$emit 这是我们比较熟悉方式,主要是父子组件之间传递方式,传子使用props,子传使用$emit....此方法经常使用,就不罗列代码了 方法二、$emit/$on 这种方法通过一个空Vue实例作为中央事件总线EventBus(事件中心),用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间通信,包括父子...default new Vue 第二步:在两个需要通信两个组件中分别引入这个bus.js import Bus from '这里是你引入bus.js路径' // Bus可自由更换喜欢名字 第三步...但是到这儿后,一定要注意一个最容易忽视,又必然不能忘记东西,那就是清除事件总线eventBus.不手动清除,它是一直会存在 第五步:在vue生命周期beforeDestroy或者destroyed中用...provide / inject API 主要解决了跨组件间通信问题,不过它使用场景,主要是子组件获取上级组件状态,跨组件间建立了一种主动提供依赖注入关系。

46210
  • vue.js: 自定义事件之—— 子组件修改组件

    如何利用自定义事件,在子组件中修改组件里边值?...关键点记住:三个事件名字 步骤如下: 这里,相对本案例,组件定义为Second-module,对应子组件是Three-module 第一步:你要想改动组件值,你组件得先有值让你改吧!...他是一个使者,是链接子组件改动组件值桥梁。 第八步:自定义事件来到组件中(秦王),找到和他同名事件(也就是荆轲刺秦时,接待荆轲秦国大臣本人了!...,他起着在组件中用于监听自定义事件一个作用,时刻准备去火车站接荆轲然后宣荆轲觐见。。这个事件是绑定在 要求改动值子组件 标签-燕国在秦国大使馆 上)。...自定义事件和他对接人(同名事件)交接,同名事件执行早在这里准备好另一个组件里边函数A,并且把自定义事件从子组件中带来参数转交接,给了这个函数A$event(固定名字,不能改)参数。

    6K40

    懂个锤子Vue 项目工程化进阶⏫:

    solid red; margin: 30px; }组件通信Vue.js 是一个基于组件框架,应用通常由多个组件组成:组件通信是指在 Vue.js 应用中,不同组件之间传递数据和消息过程...实例作为中央事件总线,用它来触发和监听事件,实现任意组件间通信;Vuex:用于全局状态管理,适用于大型应用,通过 Vuex store 来管理全局状态,实现组件间通信;父子组件通信—>子通信...子—>通信:这就涉及到子—— 通信了,那么如何: 子—>通信:BaseCount.vue: 子组件通过调用 $emit 方法触发一个@自定义事件,并传递需要发送数据:this....,重新赋值: count子组件页面同步数据更新;非父子组件通信:event bus 事件总线Vue.js 中,事件总线(Event Bus)是一种用于实现非父子组件之间通信机制它允许我们在 Vue...应用中 创建一个全局事件中心 ,组件通过该 事件中心**来:发送\接收事件** ,实现数据传递和共享创建事件总线:首先,我们需要创建一个事件总线: 通常是在主文件如 main.js,中创建一个新

    8310

    深入浅出,带你看懂Vue组件间通信8种方案

    前言 Vue种组件通信情况有多种,总结有以下4种情况: 父子组件间通信 兄弟组件间通信 祖孙后代间通信 无关系组件间通信 8种解决方案 通过 props 传递 通过 $emit 触发自定义事件 使用...$refs.msg   EventBus,即全局事件总线 全局事件总线是一种组件间通信方式,适用于任意组件间通信。 相当于给每个组件做个代理,作为数据通信中转站(可以理解为中间商)。...JS是基于对象弱类型语言,所以JS任何玩意,基本上都是对象。 此时我们Vue他是一个框架,也是JS,我们使用他时,必须要创建一个对象(也就是new Vue)。...所以我们需要将这个全局事件总线(名字是$bus)挂载到原型:  // main.js  import Vue from 'vue'  import App from '....设置批量向下传属性attrs和 listeners 包含了作用域中不作为prop 被识别、获取特性绑定 ( class 和 style 除外)。

    1.3K20

    Vue中组件之间8中通信方式,值得收藏

    之前写了一篇关于vue面试总结文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信 vue是数据驱动视图更新框架, 所以对于vue来说组件间数据通信非常重要,那么组件之间如何进行数据通信呢...如上图所示, AB、AC、BD、CE组件之间是父子关系; BC之间是兄弟关系;AD、AC之间是隔代关系; DE是堂兄关系(非直系亲属) 针对以上关系我们归类为: 父子组件之间通信 非父子组件之间通信...> 五、eventBus eventBus 又称为事件总线,在vue中可以使用它来作为沟通桥梁概念, 就像是所有组件共用相同事件中心,可以向该中心注册发送事件或接收事件, 所以组件都可以通知其他组件...初始化 首先需要创建一个事件总线并将其导出, 以便其他模块可以使用或者监听它. // event-bus.js import Vue from 'vue' export const EventBus...使用props绑定来进行一信息传递, 如果D组件中状态改变需要传递数据给A, 使用事件系统一往上传递 使用eventBus,这种情况下还是比较适合使用, 但是碰到多人合作开发时, 代码维护性较低

    70320

    Vue中组件之间8种通信方式,值得收藏

    之前写了一篇关于vue面试总结文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信 vue是数据驱动视图更新框架, 所以对于vue来说组件间数据通信非常重要,那么组件之间如何进行数据通信呢...如上图所示, AB、AC、BD、CE组件之间是父子关系;BC之间是兄弟关系;AD、AC之间是隔代关系;DE是堂兄关系(非直系亲属) 针对以上关系我们归类为: 父子组件之间通信 非父子组件之间通信...> 五、eventBus eventBus 又称为事件总线,在vue中可以使用它来作为沟通桥梁概念, 就像是所有组件共用相同事件中心,可以向该中心注册发送事件或接收事件, 所以组件都可以通知其他组件...初始化 首先需要创建一个事件总线并将其导出, 以便其他模块可以使用或者监听它. // event-bus.js import Vue from 'vue' export const EventBus...使用props绑定来进行一信息传递, 如果D组件中状态改变需要传递数据给A, 使用事件系统一往上传递 使用eventBus,这种情况下还是比较适合使用, 但是碰到多人合作开发时, 代码维护性较低

    87430

    Vue中组件之间8中通信方式,值得收藏

    之前写了一篇关于vue面试总结文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信 vue是数据驱动视图更新框架, 所以对于vue来说组件间数据通信非常重要,那么组件之间如何进行数据通信呢...> 五、eventBus eventBus 又称为事件总线,在vue中可以使用它来作为沟通桥梁概念, 就像是所有组件共用相同事件中心,可以向该中心注册发送事件或接收事件, 所以组件都可以通知其他组件...初始化 首先需要创建一个事件总线并将其导出, 以便其他模块可以使用或者监听它. // event-bus.js import Vue from 'vue' export const EventBus...移除事件监听者 如果想移除事件监听, 可以像下面这样操作: import { eventBus } from 'event-bus.js' EventBus....使用props绑定来进行一信息传递, 如果D组件中状态改变需要传递数据给A, 使用事件系统一往上传递 使用eventBus,这种情况下还是比较适合使用, 但是碰到多人合作开发时, 代码维护性较低

    1K00

    Vue中组件之间8中通信方式,值得收藏

    之前写了一篇关于vue面试总结文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信 vue是数据驱动视图更新框架, 所以对于vue来说组件间数据通信非常重要,那么组件之间如何进行数据通信呢...如上图所示, AB、AC、BD、CE组件之间是父子关系; BC之间是兄弟关系;AD、AC之间是隔代关系; DE是堂兄关系(非直系亲属) 针对以上关系我们归类为: 父子组件之间通信 非父子组件之间通信...> 五、eventBus eventBus 又称为事件总线,在vue中可以使用它来作为沟通桥梁概念, 就像是所有组件共用相同事件中心,可以向该中心注册发送事件或接收事件, 所以组件都可以通知其他组件...初始化 首先需要创建一个事件总线并将其导出, 以便其他模块可以使用或者监听它. // event-bus.js import Vue from 'vue' export const EventBus...使用props绑定来进行一信息传递, 如果D组件中状态改变需要传递数据给A, 使用事件系统一往上传递 使用eventBus,这种情况下还是比较适合使用, 但是碰到多人合作开发时, 代码维护性较低

    1.1K41

    Vue组件通信-下篇

    前言 接上篇Vue组件通信-上篇文章介绍了Vue组件基本通信方式,主要解决父子组件通信。本篇文章重点介绍兄弟组件、跨组件是如何通信。 EventBus EventBus也称为事件总线。...在 Vue 中,EventBus可以作为通信桥梁概念,就像所有组件共享同一个事件中心一样,可以注册向中心发送或接收事件,因此组件可以并行通知其他组件,但是太不方便了,所以如果使用不慎,就会造成难以维护...因此,需要一个更完整Vuex作为状态管理中心,将通知概念提升到共享状态级别。 创建eventBus: 首先,需要创建一个事件总线并将其导出,以便其他模块可以使用或收听它。...$emit发送addition事件并且携带自增num。 接收事件: 在shownNum.vue中也导入event-bus.js,在mounted中使用EventBus....它是一个对象,里面包含了作用在这个组件上所有事件监听器,相当于子组件继承了组件事件

    1.1K30

    8种vue组件通信方式(转载)

    image vue是数据驱动视图更新框架,所以对于vue来说组件间数据通信非常重要,那么组件之间如何进行数据通信呢?...> 五、eventBus eventBus 又称为事件总线,在vue中可以使用它来作为沟通桥梁概念, 就像是所有组件共用相同事件中心,可以向该中心注册发送事件或接收事件, 所以组件都可以通知其他组件...初始化 首先需要创建一个事件总线并将其导出, 以便其他模块可以使用或者监听它. // event-bus.js import Vue from 'vue' export const EventBus...使用props绑定来进行一信息传递, 如果D组件中状态改变需要传递数据给A, 使用事件系统一往上传递 使用eventBus,这种情况下还是比较适合使用, 但是碰到多人合作开发时, 代码维护性较低...接下来看一个跨通信例子: // app.vue // index.vue <child-com1 :name="name" :

    1.2K50

    Vue 8种组件通信方式

    vue是数据驱动视图更新框架,所以对于vue来说组件间数据通信非常重要,那么组件之间如何进行数据通信呢?...vue组件中关系说明: AB、AC、BD、CE组件之间是父子关系; BC之间是兄弟关系;AD、AE之间是隔代关系; DE是堂兄关系(非直系亲属) 针对以上关系我们归类为: 父子组件之间通信...> 五、eventBus eventBus 又称为事件总线,在vue中可以使用它来作为沟通桥梁概念, 就像是所有组件共用相同事件中心,可以向该中心注册发送事件或接收事件, 所以组件都可以通知其他组件...初始化 首先需要创建一个事件总线并将其导出, 以便其他模块可以使用或者监听它. // event-bus.js ​ import Vue from 'vue' export const EventBus...使用props绑定来进行一信息传递, 如果D组件中状态改变需要传递数据给A, 使用事件系统一往上传递 使用eventBus,这种情况下还是比较适合使用, 但是碰到多人合作开发时, 代码维护性较低

    95940

    面试官:Vue组件间通信方式都有哪些?

    三、组件间通信方案 整理vue中8种常规通信方案 通过 props 传递 通过 $emit 触发自定义事件 使用 ref EventBus 或 root attrs listeners Provide...触发自定义事件 适用场景:子组件传递数据给组件 子组件通过emit触发自定义事件,emit第二个参数为传递数值 组件绑定监听器获取到子组件传递过来参数 Chilfen.vue this....$refs.foo // 获取子组件实例,通过子组件实例我们就能拿到对应数据 EventBus 使用场景:兄弟组件传值 创建一个中央时间总线EventBus 兄弟组件通过emit触发自定义事件,emit...第二个参数为传递数值 另一个兄弟组件通过$on监听自定义事件 Bus.js // 创建一个中央时间总线类 class Bus { constructor() { this.callbacks...$parent.emit('add') listeners 适用场景:祖先传递数据给子孙 设置批量向下传属性attrs和 listeners 包含了作用域中不作为 prop 被识别 (且获取

    1.4K10

    vue2升vue3: Event Bus 替代方案

    实现事件监听类on/emit/off方法,Vue event事件机制解读》mitt基于事件总线订阅发布模式,任意组件之间都可以通信。...在绝大多数情况下,不鼓励使用全局事件总线在组件之间进行通信。虽然在短期内往往是最简单解决方案,但从长期来看,它维护起来总是令人头疼。...根据具体情况来看,有多种事件总线替代方案:props / emit 应该是父子组件之间沟通首选。兄弟节点可以通过它们节点通信。...封装自定义事务总线文件 mybus.js创建新 js 文件,在任何你想使用地方导入即可。import mitt from 'mitt';type Events = {  menuDrag?...:兄弟组件,跨组件传值,事件总线通信方式(mitt / tiny-emitter) https://blog.csdn.net/qq_42543244/article/details/123806588Vue

    1.6K20

    【Vuejs】339- Vue.js 组件通信精髓归纳

    组件通信 ref和$parent和$children Vue.js 内置通信手段一般有两种: ref:给元素或组件注册引用信息; $parent / $children:访问 / 子实例。...provide / inject API 主要解决了跨组件间通信问题,不过它使用场景,主要是子组件获取上级组件状态,跨组件间建立了一种主动提供依赖注入关系。...这种父子(含跨)传递数据通信方式,Vue.js 并没有提供原生 API 来支持,下面介绍一种在父子组件间通信方法 dispatch 和 broadcast。...broadcast 方法之类似,只不过是向下遍历寻找。 来看一下具体使用方法。有 A.vue 和 B.vue 两个组件,其中 B 是 A 子组件,中间可能跨多级,在 A 中向 B 通信: <!...在一些简单场景,你可以使用一个空 Vue 实例作为一个事件总线中心(central event bus): //中央事件总线 var bus=new Vue(); var app=new

    86320

    vuejs组件通信精髓归纳

    组件通信 ref和$parent和$children Vue.js 内置通信手段一般有两种: ref:给元素或组件注册引用信息; $parent / $children:访问 / 子实例。...provide / inject API 主要解决了跨组件间通信问题,不过它使用场景,主要是子组件获取上级组件状态,跨组件间建立了一种主动提供依赖注入关系。...这种父子(含跨)传递数据通信方式,Vue.js 并没有提供原生 API 来支持,下面介绍一种在父子组件间通信方法 dispatch 和 broadcast。...broadcast 方法之类似,只不过是向下遍历寻找。 来看一下具体使用方法。有 A.vue 和 B.vue 两个组件,其中 B 是 A 子组件,中间可能跨多级,在 A 中向 B 通信: <!...在一些简单场景,你可以使用一个空 Vue 实例作为一个事件总线中心(central event bus): //中央事件总线 var bus=new Vue(); var app=

    84341

    Vue组件通信原理及应用场景解析

    父子组件通信Vue.js开发中,父子组件通信是最简单且最常见组件通信方式之一。它涉及到组件向子组件传递数据,以及子组件通过事件组件发送消息。...使用事件总线进行通信 另一种兄弟组件通信方式是使用事件总线Vue.js应用中可以创建一个全局事件总线,用于在任何组件间进行事件发布和订阅。...在Vue实例中创建事件总线: // main.js或者其他入口文件 import Vue from 'vue'; // 创建一个Vue实例作为事件总线 export const eventBus =...优势和劣势 兄弟组件通信通过共同组件或者事件总线进行数据传递,较为灵活,能够在不具有直接联系组件间实现通信。然而,这种方式也有一些劣势。...在main.js或者其他入口文件中,创建并配置Vuex Store,并将其Vue实例关联。

    18310

    Vue事件总线(EventBus)使用详细介绍

    前言 vue组件非常常见有父子组件通信,兄弟组件通信。而父子组件通信就很简单,组件会通过 props 向下传数据给子组件,当子组件有事情要告诉组件时会通过 $emit 事件告诉组件。...如果咱们应用程序不需要类似Vuex这样库来处理组件之间数据通信,就可以考虑Vue 事件总线 ,即 EventBus来通信。 EventBus简介 EventBus 又称为事件总线。...$EventBus = new Vue() 注意,这种方式初始化 EventBus 是一个 全局事件总线 。稍后再来聊一聊全局事件总线。...假设你有两个Vue页面需要通信: A 和 B ,A页面 在按钮上面绑定了点击事件,发送一则消息,想=通知 B页面。 <!...大家都知道vue是单页应用,如果你在某一个页面刷新了之后,之相关EventBus会被移除,这样就导致业务走不下去。

    2K20

    vue组件通信方式有哪些?

    vue组件通信方式一、props(向子传值----自定义属性) / $emit(子向传值----- 自定义事件)组件通过props方式向子组件传递数据,而通过$emit 子组件可以向组件通信。...、eventBuseventBus 又称为事件总线,在vue中可以使用它来作为沟通桥梁概念, 就像是所有组件共用相同事件中心,可以向该中心注册发送事件或接收事件, 所以组件都可以通知其他组件。...初始化方式1:首先需要创建一个事件总线并将其导出, 以便其他模块可以使用或者监听它.// event-bus.jsimport Vue from 'vue'export const EventBus =...$bus=new Vue() // 在Vue原型上挂载事件总线// 这种方式在使用事件总线时候不需要在每个组件中导入bus,// 使用this....}}export default new Vuex.Store({ state, mutations})七、vue slot 插槽通信父子插槽通信可以理解为在定义组件时候预先留好了一个插槽,组件在调用子组件使用将东西插到插槽里面显示

    1.9K10
    领券