vue2利用Bus如何实现非父子之间组件四步完成

最新推荐文章于 2024-04-25 14:53:29 发布
置顶 最新推荐文章于 2024-04-25 14:53:29 发布
阅读量2.3k 收藏 4
点赞数 2
分类专栏： vue 文章标签： vue 父子组件 利用bus 简单易懂
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43200071/article/details/82708061
版权
本文通过一个实例介绍了如何在Vue2中利用Bus进行非父子组件之间的通信，详细步骤包括创建公共的Vue对象、在发送方组件触发自定义事件、在接收方组件注册事件处理函数，以及解决页面刷新后状态丢失的问题。
摘要由CSDN通过智能技术生成

非父子组件之间通信：

此图片中QQ不是本人QQ

以登陆和登出，改变个人中心 | 退出 和 登陆 | 注册 的显示的为例
1.找一个公共的vue对象（bus）
创建一个公共的对象
按需导出
2.在传值方（login.vue）中，通过bus触发自定义事件传递载荷
文件夹名自己随意，规范就好

最低0.47元/天 解锁文章
奋斗的一缕小草
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
VUE2.0学习记录——非父子组件之间的传值(BUS/总线/发布订阅者模式/观察者模式)
baokx的专栏
08-13 194
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子组件之间的传值(BUS/总线/发布订阅者模式/观察者模式)</title> </head> <body> <div id="app"&...
【Vue2.0学习】—全局事件总线GlobalEventBus（六十一）
道阻且长，行则将至。
10-23 248
【代码】【Vue2.0学习】—全局事件总线GlobalEventBus（六十一）
Vue Bus 总线原理
最新发布
weixin_45461004的博客
04-25 88
【代码】Vue Bus 总线原理。
Vue2中的全局事件总线的安装与使用
weixin_53965547的博客
04-26 2116
什么是全局事件总线？ 全局事件总线就是一种组件间通信的方式，适用于任意组件间通信。 安装全局事件总线的方法如下
简单了解 公交事件总线实现的原理(bus)
weixin_52139966的博客
06-03 527
公交事件总线:指的是一个空的Vue实例,bus=new Vue({}),用于组件之间的 简单通信. 过程:1.创建事件总线,就是实例化一个空Vue对象赋值给一个变量 2.通过这个对象调用.$emit('消息名','值')发布消息 3.使用.$on('消息名',处理函数) 用来监听 4. .$off('消息名') 销毁 实例: <div id="box"> <laoduan></laoduan> <jiaxin v-if='flag
vue2.0 中央控制总线 Bus
weixin_45563734的博客
11-28 589
vue2.0 中央控制总线 Bus
vue2利用Bus.js如何实现非父子组件通信详解
10-19
主要给大家介绍了关于vue2利用Bus.js如何实现非父子组件通信的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧。
vue2.0父子组件及非父子组件之间的通信方法
08-31
本文将详细介绍 Vue 2.0 中父子组件以及非父子组件之间的通信方法。 1. **父组件传递数据给子组件** 在 Vue 中，父组件向子组件传递数据主要通过 `props` 属性。以下是一个简单的例子： 父组件（Parent）： ```...
vue中的event bus非父子组件通信解析
08-29
Vue中的Event Bus是实现非父子组件通信的一种有效方法。Event Bus是指一个中央事件总线，用于在不同的组件之间传递事件和数据。下面我们将对Event Bus的概念、实现和应用进行详细的介绍。 Event Bus的概念 Event ...
浅谈Vue父子组件和非父子组件传值问题
08-29
Vue 组件传值问题是 Vue 开发中非常重要的一个话题，涉及到父子组件和非父子组件之间的传值问题。今天，我们将一步步地介绍如何在 Vue 中实现组件传值。 组件的创建 创建组件是 Vue 开发的基础步骤。下面是一个...
bus总线的原理解析
哆来A梦没有口袋的博客
04-06 2711
非父子组件间传递数据有很多种方式，本文从官方文档开始解析bus总线的原理 1.关于官方介绍从 Vue 1.x 迁移 — Vue.js 在官方文档中对bus总线的介绍是使用，但是明确指出了复杂情况推荐使用vuex实现非父子组件直接的传值，bus总线应用在简单的项目 1.怎么理解bus总线 bus总线就是一个中间组件,触发事件，触发中间组件，监听中间组件的变化 2.bus组件存在的条件和注册 1.所有组件都可以访问 2.可以使用$emit,$on,$off 在项...
vue总线机制(bus)知识点详解
10-15
在本篇文章中小编给大家整理的是关于vue总线机制(bus)知识点总结，有兴趣的朋友们可以跟着学习下。
Vue组件通信$attrs、$listeners实现原理解析
11-19
前言 vue通信手段有很多种，props/emit、vuex、event bus、provide/inject 等。还有一种通信方式，那就是$attrs和$listeners，之前早就听说这两个api，趁着有空来补补。这种方式挺优雅，使用起来也不赖。下面例子都会通过父、子、孙子，三者的关系来说明使用方式。 $attrs 官方解释： 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class和style除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和style除外)，并且可以通过v-bind=”$attrs”传入内部组件——在创
vue中的事件总线：$bus
总柴的博客
04-20 1418
vue中的事件总线：$bus 解决的问题：无关组件之间的交互问题（也可以使用vuex） 使用方法： 1.创建事件总线： Vue.prototype.$bus = new Vue(); 2.触发事件并传参： this.$bus.$emit(event, this.event);// 触发事件（事件名，参数） this.$bus.$emit(event);// 触发event事件 3.监听事件event并收参data： this.$bus.$on(event, (data) => { consol
vue中bus的详细使用
热门推荐
weixin_44020340的博客
09-07 2万+
vue中关于兄弟组件bus的使用方法 首先，bus只能用在兄弟组件之间的传值，其它关系的传值不用bus。 废话不多说，请看下面代码解说 首先，先创建bus.js文件，然后在引用，这里有两种引用方法：局部引用和全局引用。 // bus.js文件内容 import Vue from 'vue' // export default new Vue() const Bus = new Vue() export default Bus 局部引用：是在兄弟组件的文件里面引用bus.js文件 全局引用：是在main.
vue eventBus实现原理，你没看懂算我输
weixin_39168678的博客
12-13 1万+
刚开始拿到eventBus的时候很幼稚的想，用一个全局vue对象充当数据容器，那为什么不用一个全局的map就可以 window.busMap = {} 组件a pd: window.busMap.a, &amp;lt;template&amp;gt; &amp;lt;div&amp;gt;{{pd}}&amp;lt;/div&amp;gt; &amp;lt;/template&amp;gt; 组件b created () {
vue里创建bus的两用方法及用法（兄弟传值）
Lwh2004的博客
01-19 6775
bue的两种创建方法及使用方法
Vue传值——bus总线机制
云中客的博客
12-06 1702
众所周知，vue提供了很多套组件间传值的方法，父子组件直接用props和$emit就好，大型项目则用vuex，但有一种更适合在小项目中使用的非父子组件传值方法，即bus总线机制。它的用法的实现原理是前端面试中常考的。在第一次换工作的时候，几乎所有面试官都问了有关vue组件传值的几种方法，所以掌握这个知识点是很重要的。 这种方法的原理是通过一个空的Vue实例作为中央事件总线...
vue eventbus的实现原理
Stavin Li的博客
03-01 716
//1.main.js中初始化事件调度中心 Vue.prototype.$eventBus = new Vue() //2.发布 this.$eventBus.$emit("eventName") //3.订阅 this.$eventBus.$on("eventName",function(){ console.log("go on") }) //4.注意在 组件生命周期 beforeDestroy 内，解除订阅。 this.$eventBus.$off("eventName") ...
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'], ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值