vue event bus 非父子组件间通信问题

最新推荐文章于 2024-05-15 10:00:00 发布
最新推荐文章于 2024-05-15 10:00:00 发布
阅读量726 收藏 1
点赞数
分类专栏： vue 文章标签： vue event bus 非父子组将通信 中央事件总线 组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhai_15733218875/article/details/79666143
版权

场景：点击用户头像，根据uid跳转到用户详情(非父子组件)
注意我这里需要通过路由跳转到详情
问题：
这里写图片描述

event bus 又叫 中央事件总线
假设我们现在有一个 B组件 想要 A组件的数据 (A、B非父子组件)
简单来说使用它需要三个步骤：

1.new 一个 空的 vue实例

2.在A组件中触发事件(使用$emit)

3.B组件中的钩子中监听事件(使用$on)

截图自vue官网
https://cn.vuejs.org/v2/guide/components.html#%E9%9D%9E%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E9%80%9A%E4%BF%A1
这里写图片描述

接下来就是我的代码部分了 采用的是把event bus 实例注入到 vue根组件的方法
1.在入口文件中 new bus实例(注入根组件)
这里写图片描述
2.我在A组件中触发事件
这里写图片描述
3.我在B组件中的钩子里面监听
这里写图片描述
这里用的是箭头函数，没有用箭头函数的方法也试了，仍然不行

嗯 以上就是我遇到的问题
当使用event bus 是需要跳转路由，则会出现这个问题
所以改成用路由的params替代

萌新不会永远是萌新
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue中的event bus非父子组件通信解析
08-29
vue中的event bus非父子组件通信解析 Vue中的Event Bus是实现非父子组件通信的一种有效方法。Event Bus是指一个中央事件总线，用于在不同的组件之间传递事件和数据。下面我们将对Event Bus的概念、实现和应用进行...
vue2.0父子组件及非父子组件之间的通信方法
08-31
3. **非父子组件通信** 对于非父子组件间的通信，Vue 2.0 提供了事件总线（Event Bus）或者使用 Vuex 状态管理库。这里我们讨论事件总线的使用： 首先，创建一个全局的 Vue 实例作为事件中心（Event Hub）： ```...
Vue事件总线（EventBus）使用指南：详细解析与实战应用
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
05-31 1万+
vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即EventBus来通信。EventBus 又称为事件总线。
vue 事件总线EventBus的概念、使用以及注意点
aaaa123456789111的博客
07-19 2884
vue组件中的数据传递最最常见的就是父子组件之间的传递。父传子通过props向下传递数据给子组件；子传父通过$emit发送事件，并携带数据给父组件。而有时两个组件之间毫无关系，或者他们之间的结构复杂，如何传递数据呢？这时就要用到 vue 中的事件总线 EventBus的概念EventBus又称事件总线，相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件，如图：废话不多说，直接开始使用EventBus要用EventBus，首先要初始化一个EventBus，这里称它为全局事件总线。 第二种初始化方
vue组件通信必知必会——事件总线Event Bus
最新发布
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
05-15 1204
主要介绍了vue项目中，如何使用EventBus（事件总线）实现跨组件通信，并了解vue2和vue3中不同组件之间，生命周期构子函数执行的顺序。
vue祖孙组件间传值
02-07 1430
vue祖孙组件间传值
Vue祖孙组件怎么传值
小天才程序员的博客乐园
06-16 2万+
vue祖孙之间该怎么传值以及$props, $attrs, $listeners
vue2.0父子组件间通信的实现方法
08-30
对于非父子关系的组件间通信，Vue提供了一种名为“事件总线”（Event Bus）的方法。创建一个空的Vue实例作为事件中心： ```javascript let Hub = new Vue(); ``` 想要发送事件的组件触发事件总线： ```...
Vue组件通信中非父子组件传值知识点总结
10-15
在Vue中，非父子组件的通信通常依赖于事件总线（Event Bus）或者Vuex状态管理库。这里我们将主要讲解事件总线的方法。 事件总线是一种自定义事件机制，它实际上是一个单独的Vue实例，用来作为组件间通信的桥梁。...
在Vue中，向上通信（从孙子到爷爷）的常用方法有以下几种：
涂涂
05-11 3386
访问根组件，再使用深度优先搜索遍历其子孙组件，找到爷爷组件，调用其方法。注：这里提供的只是几种可能的方法，具体使用要根据实际情况选择。获取爷爷组件中的属性或方法，间接调用其方法。访问爷爷组件，调用其方法。提供一个函数或对象，让孙子组件使用。下面简单介绍这三种方法的使用。vue3.0照例只是写法改变。
vue父组件给子组件的组件传值provide inject的方法
10-16
在本篇文章里小编给大家整理的是一篇关于vue父组件给子组件的组件传值provide inject的方法，需要的朋友们学习下。
vue中通过使用$attrs实现组件之间的数据传递功能
12-11
组件之间传递数据的方式有很多种，之所以有这么多种方式，是为了满足在不同场景不同条件下的使用。 一般有三种方式： props vuex Vue Event Bus 本文介绍的是使用$attrs的方式。 这是$attrs的官网api https://cn.vuejs.org/v2/api/#vm-attrs 这个api是在2.4版本中添加的，那么为什么要添加这个特性呢？ 看看官网是怎么解释的 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class  和  style  除外)。 当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class  和
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3963
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
vue里面使用EventBus（事件总线）
qq_44552416的博客
09-25 1483
轻量级: Mitt只有200字节大小，不会增加你的应用程序的负担方便易用：只需要引入mitt并配置即可使用支持任何Javascript环境：Mitt支持在任何Javascript环境下使用，不仅限于Vue应用场景：组件通信。
vue源码之 eventBus原理
小+
12-02 1168
VUE中eventBus可以用来进行任何组件之间的通信，我们可以把eventBus当成一个管道，这个管道两端可以接好多组件，两端的任何一个组件都可以进行通信。其实这个管道就是Vue实例，实例中的$on, $off, $emit方法来实现此功能。
vue3 更全的父子（孙）组件传参
weixin_48091030的博客
03-05 853
前段时间写过一个 vue3的父子组件传参，经过一段时间的学习，现在进行补充一些。
vue 孙组件给爷组件传递数据,本质层层传递
tenc1239的博客
08-26 1843
Child,},methods: {// 必须在中间组件 定义事件// 在这里处理数据
Vue事件总线（EventBus）使用详细介绍
热门推荐
i168wintop的博客
07-08 2万+
Vue事件总线（EventBus）使用详细介绍 前言 vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过props向下传数据给子组件，当子组件有事情要告诉父组件时会通过$emit事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？ 如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue...
vue2非父子组件通信
09-23
在 Vue 2 中，非父子组件之间的通信可以通过事件总线、Vuex 和 provide/inject 来实现。 1. 事件总线 (Event Bus): 在 Vue 实例上创建一个中央事件总线，其他组件可以订阅和触发事件。这种方式适用于简单的组件通信场景。 - 创建事件总线： ```javascript // main.js Vue.prototype.$bus = new Vue(); ``` - 在发送组件中触发事件： ```javascript this.$bus.$emit('event-name', data); ``` - 在接收组件中订阅事件： ```javascript mounted() { this.$bus.$on('event-name', (data) => { // 处理接收到的数据 }); }, ``` 2. Vuex: Vuex 是 Vue.js 官方提供的状态管理库，用于在组件之间共享状态。非父子组件通过 Vuex 存储和获取数据。 - 定义和导出 store： ```javascript // store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { data: null, }, mutations: { setData(state, payload) { state.data = payload; }, }, actions: { updateData({ commit }, payload) { commit('setData', payload); }, }, }); ``` - 在发送组件中使用 dispatch 触发 action： ```javascript this.$store.dispatch('updateData', data); ``` - 在接收组件中使用 mapState 辅助函数获取数据： ```javascript computed: { ...mapState(['data']), }, ``` 3. provide/inject: 使用 provide 和 inject 实现非父子组件之间的数据传递。这种方式适用于跨层级的组件通信。 - 在父组件中使用 provide 提供数据： ```javascript provide() { return { data: this.data, }; }, ``` - 在子组件中使用 inject 注入数据： ```javascript inject: ['data'], ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值