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

最新推荐文章于 2024-06-28 18:06:01 发布
置顶 最新推荐文章于 2024-06-28 18:06:01 发布
阅读量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触发自定义事件传递载荷
文件夹名自己随意，规范就好
按需导入
写在methods里的登录状态成功即将跳转时候
这里写图片描述
3.接收方（App.vue）使用bus去注册自定义事件，写好处理函数

最低0.47元/天 解锁文章
奋斗的一缕小草
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue2利用Bus.js如何实现非父子组件通信详解
10-19
主要给大家介绍了关于vue2利用Bus.js如何实现非父子组件通信的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧。
vue2 事件总线event bus 非父子组件间通信
weixin_48235660的博客
02-21 804
vue2 事件总线event bus 非父子组件数据传输 vue 事件总线event bus 非父子组件数据传输
Vue2中管理$bus事件,统一移除事件
fxshy的博客
06-28 239
Vue2中管理$bus事件,统一移除事件
Vue非父子组件之间通过Bus实现传值
weixin_43842567的博客
05-29 364
vue中通过Bus实现非父子组件的传值（如两个页面之间只是存在跳转关系，也可以直接通过地址栏传参的方法进行传值） 1、新建一个bus.js文件，放到任一文件夹里（如下三行代码搞定） import Vue from 'vue' const Bus = new Vue() export default Bus 2、传值方 <script> import Bus from '../.....
vue中通过bus实现非父子组件通信
weixin_41604040的博客
10-31 263
vue中通过bus实现非父子组件通信需求实现 众所周知，vue中父可以通过子的props属性传值，子组件则可以通过$emit()向父组件传递数据，但如果是非父子组件，则可以通过bus来进行传值，这种设计模式叫做发布-订阅模式。 需求 假设这样一个应用场景，页面上有两个元素，我想在单击一个元素的时候使得另一个元素的内容变成和这个元素一样的。 点击内容1之后，变成下面这样的效果： 实现 页面的结构很简陋，如下： 其中test是我们将用vue注册的自定义组件。 <!DOCTYPE html> &l
Vue非父子组件之间的通信
m0_71485750的博客
07-26 1579
让App.vue提供一些数据给HomeContent.vue使用[外链图片转存失败,在provide中引入的this.name本身并不是响应式。此篇讲解的是,在学习状态管理之前,非父子间通信的方案。一些深度嵌套的组件，子组件想要获取父组件的部分内容。computed返回的是一个ref对象。mitt或tiny-emitter。在开发中，我们构建了组件树之后，除了。//通过provide将数据传出。一个provide选项。//发送事件到事件总线上。//监听事件总线上的事件。...
vue 2 使用 Bus.js 实现兄弟 (非父子) 组件通信 简单案例
愿我如星君如月 ... 夜夜流光相皎洁 ...
12-26 584
vue2中废弃了$dispatch和$broadcast广播和分发事件的方法。父子组件中可以用props和$emit()。如何实现非父子组件间的通信，可以通过实例一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，之后通过分别调用Bus事件触发和监听来实现组件之间的通信和参数传递。 首先需要在任意地方添加一个bus.js 在bus.js里面 写入下面信息 impor...
vue非父子组件之间传值
qq_42426159的博客
11-01 375
组件通信： 父向子，子向父。翻看 vue基础操作02笔记。 非父子组件之间 在components中定义一个公共的 bus.js文件，里面封装一个vue对象 // 创建一个Vue实例 import Vue from 'vue' export default new Vue() components——>GG.vue ： 两个没有关系的路由组件 <...
vue脚手架中使用bus方式,实现非父子组件之间传参
业余前端的职业经历
02-01 1035
这里我使用是vue-cli3.3版本以上创建的脚手架 不知道查看vue-cli版本的 在命令行中输入 vue -V 这里是大写的 V @vue/cli 4.1.2 这是笔者的@vue/cli 版本 vue-cli在3.*版本后变成了 @vue/cli 咱回归正题 1.在src文件建立一个 util文件 创建一个 bus.js文件 import Vue from "vue"...
Vue 全局事件总线$bus实现非父子组件间通信
weixin_41987908的博客
11-03 657
全局事件总线$bus
Vue3实现非父子组件通信
stay hungry, stay foolish
04-04 1374
方式一：provide/inject // 父组件传递数据 provide: { msg: "我是小仙女", emotion: "超级开心" } //接收数据的组件 inject:['msg','emotion'] 注意：provide中定义的数据不能在本组件中使用 一般provide最好返回一个对象，可以获取到data中的数据。要想provide中数据变成响应式的，用computed包裹。 import {computed} from 'vue' // 向非父组件传递数据
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 开发的基础步骤。下面是一个...
鹈鹕算法POA-Kmean-Transformer-LSTM组合状态识别分类【含Matlab源码 6749期】.zip
08-02
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化Kmeans-Transformer-lstm分类预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化Kmeans-Transformer-lstm分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Kmeans-Transformer-lstm分类 4.4.3 灰狼算法GWO/狼群算法WPA优化Kmeans-Transformer-lstm分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Kmeans-Transformer-lstm分类 4.4.5 萤火虫算法FA/差分算法DE优化Kmeans-Transformer-lstm分类 4.4.6 其他优化算法优化Kmeans-Transformer-Lstm分类
三角测量拓扑聚合器TTAO-Kmean-Transformer-BiLSTM负荷预测【含Matlab源码 6686期】.zip
08-02
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化Kmeans-Transformer-Bilstm预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化Kmeans-Transformer-Bilstm预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Kmeans-Transformer-Bilstm预测 4.4.3 灰狼算法GWO/狼群算法WPA优化Kmeans-Transformer-Bilstm预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Kmeans-Transformer-Bilstm预测 4.4.5 萤火虫算法FA/差分算法DE优化Kmeans-Transformer-Bilstm预测 4.4.6 其他优化算法优化Kmeans-Transformer-Bilstm预测
S9300X-V200R021C00SPC100-MPUE主控版本
08-02
S9300X-V200R021C00SPC100-MPUE主控版本，支持S9300X-4/8/12
【创新未发表】Matlab实现哈里斯鹰优化算法HHO-RF实现风电预测算法研究.rar
最新发布
08-02
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
vue2非父子组件通信
09-23
在 Vue 2 中，非父子组件之间的通信可以通过事件总线、Vuex 和 provide/inject 来实现。 1. 事件总线 (Event Bus): 在 Vue 实例上创建一个中央事件总线，其他组件可以订阅和触发事件。这种方式适用于简单的组件通信...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值