vue——bus总线的使用

已于 2022-01-19 09:39:03 修改
阅读量350 收藏
点赞数 1
分类专栏： vue 文章标签： vue
于 2021-08-18 13:58:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45695853/article/details/119777173
版权
bus总线可以实现任意组件之间的传值

1.在src目录下创建一个utils文件，在该文件夹下面创建一个bus.js（名字自定义）
在这里插入图片描述
2.在bus.js写入以下代码

import Vue from 'vue';
export default new Vue()

3.在要的组件中引入
在这里插入图片描述
在Mine.vue和Shop-carz.vue中引入
在这里插入图片描述
Mine.vue给Shop-car.vue传值,说明如下图：
在这里插入图片描述

在这里插入图片描述
在created生命周期接受传递过来的数据
在这里插入图片描述

全局挂载的引入方式，在main.js中引入
在这里插入图片描述
在这里插入图片描述

吃葡萄不吐葡萄皮嘻嘻
关注
专栏目录
bus总线用法，--- (上班复制语法版本)
weixin_47606392的博客
05-07 426
bus总线用法，--- (复制语法版本)
Vue —— 全局事件总线（vc对象销毁前一定要把bus的事件解绑）
weixin_54966486的博客
03-11 1760
安装全局事件总线 main.js //创建vm new Vue({ el:'#app', render: h => h(App), //利用beforeCr钩子 beforeCreate(){ Vue.prototype.$bus = this //安装全局事件总线 } }) App.vue <script> methods:{ //勾选or取消勾选一个todo c..
vue Bus总线
weixin_34238642的博客
09-05 197
有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。 参考：http://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&fps=1 例子：https://segmentfault.com/q/1010000007491994...
Vue-Bus 使用教程
最新发布
gitblog_00496的博客
08-22 339
Vue-Bus 使用教程 vue-busA event bus for Vue.js项目地址:https://gitcode.com/gh_mirrors/vu/vue-bus 项目介绍 Vue-Bus 是一个用于 Vue.js 的事件总线插件。它允许你在不同的 Vue 组件之间轻松地发送和接收事件，从而实现组件间的通信。这个插件非常轻量级，易于集成和使用，是处理组件间通信的一个简洁解决方案。 ...
总线bus的使用
An滴饭儿的博客
04-24 1485
bus其实有很多种使用方法，但是原理都是一样，就是创建一个空的Vue实例，挂载在Vue原型prototype上。 以下几种方法都是A组件传值给B组件，不再赘述 使用方法1 1）在main.js中 const Bus = new Vue() Vue.prototype.Bus = Bus 2）因为在main.js中引入的就相当于在全局引入，所以在各个组件中使用的时候就不用再引一遍了，话不多说，直接...
Vue中使用总线bus
~
11-25 1939
1.新建一个文件bus.js import Vue from 'vue' const bus = new Vue() export default bus 2..可以在main.js中引入该文件，并将其挂载到Vue函数上，这样在Vue实例或组件中不用再去重复引用bus import bus from '@/utils/bus' Vue.prototype.$bus = bus 3.使用bus发送消息，进行事件触发,附加参数都会传给监听器回调 this.$bus.$emit(event, [
Vue组件传值之bus总线
01-08
在vue中组件传值有多种方式，我们最常用的是props，当然还有vuex，但是对于简单的场景，vuex显得过于复杂了，今天我们介绍另一种组件传值的方式——Bus总线 正文 使用一个空的Vue实例作为中央事件总线。实际应用中，...
Vue —— Search 组件面包屑
weixin_54966486的博客
03-29 738
步骤 Search 组件 <template> <div> <!-- 商品分类三级列表 --> <typeNav /> <div class="main"> <div class="py-container"> <!--bread ：面包屑，带有 x 的结构的--> <div class="bread"> &.
vue事件总线（eventBus）的使用
weixin_43930421的博客
06-01 471
钉钉
Vue任意组件间的通信——全局事件总线
m0_56396386的博客
11-14 876
笔者说：今天学习的无意之间解决了之前困扰了很久的问题，这个老师的讲解真的是妙到家啊，看完之后都会不自主的哇一下。 让我想起了很久之前看到过的一句话：因为年少时见过太多惊艳的人，所以会一直追逐繁星。 Vue全局，组件与组件之间传值–全局事件总线 功能：任意组件间通信 安装全局总线 //在main.js文件中 //创建vm new Vue({ el:'#app', render:h => h(App), beforeCreate(){ Vue.prototype.
bus总线的使用
一个昵称叫铃风的小前端
06-04 1188
非父子组件传递事件常用方案 // main.js const BUS = new Vue() Vue.prototype.BUS = BUS // A.vue this.BUS.$emit('changeSidebar') // changeSidebar和$on处一致即可 // B.vue mounted () { this.BUS.$on('changeSidebar', () =&gt...
Vue BUS总线
qq_42345237的博客
12-22 3578
Vue Bus 总线 作用：在vue中实现非父子组件之间通信。 场景：bus适合小项目、数据被更少组件使用，或者数据量少的项目。 本质：实际上是一个发布订阅者模式的使用，利用 vue 的自定义事件机制，在触发时通过 $emit 向外发布一个事件，而在需要使用的页面，通过 $on 监听事件或者说是注册事件。是一个不具备DOM的组件。它就像是所有组件共用相同的事件中心，用它来作为沟通桥梁，可以向该中心注册发送事件或接收事件。 实现： 使用一个空的 Vue 实例(bus.js)作为中央事件总线。 // bus
vue bus总线
weixin_30247781的博客
09-17 228
问题：解决兄弟组件通信的问题，当然你也可以选择vuex 首先三个组件main.vue, child1.vue, child2,vue 注意：注册的总线事件要在组件销毁时卸载，否则会多次挂载，造成触发一次但多个响应的情况 方法一：使用一个空的Vue实例(bus.js)作为中央事件总线。 bus.js import Vue from 'vue'; const bus = ne...
vue 的bus总线
chunchengshao0931的博客
06-17 212
bus声明 global.bus = new Vue() 事件发送 controlTabbar () { global.bus.$emit('pickUp', 'ddd') }, 事件接收 global.bus.$on('pickUp', (res) => { this.is...
vue Bus的使用
weixin_67490903的博客
09-09 242
问题：但这种引入方式，经过webpack打包后可能会出现Bus局部作用域的情况，即引用的是两个不同的Bus，导致不能正常通信。然后在子组件中通过this.$root.Bus.$on(),this.$root.Bus.$emit()来调用。注意：注册的总线事件要在组件销毁时卸载，否则会多次挂载，造成触发一次但多个响应的情况。第①种：可以直接将Bus注入到Vue根对象中。到vue.prototype上，
Vue事件总线（EventBus）使用详细介绍
weixin_59395272的博客
06-21 261
来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。假设你有两个Vue页面需要通信： A 和 B ，A页面 在按钮上面绑定了点击事件，发送一则消息，想=通知 B页面。，接下来你需要做到的就是在你的组件中加载它，并且调用同一个方法，就如你在父子组件中互相传递消息一样。的使用方法，是不是很简单。
vue3.0如何使用bus总线传值
09-10
Vue3.0可以使用Vue.observable来实现bus总线传值，可以在不同组件之间共享状态。具体使用方法可以参考Vue官方文档：https://vuejs.org/v2/guide/migration-observable.html ### 回答2： 在Vue 3.0中使用事件总线...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吃葡萄不吐葡萄皮嘻嘻

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值