vue中的bus使用案列

最新推荐文章于 2024-12-27 11:24:19 发布
原创 最新推荐文章于 2024-12-27 11:24:19 发布 · 423 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

使用可以解决非父子组件传值的问题(vuex也可以，博客已更新)；

首先在main.js中，在vue中挂载bus属性，值等于vue的实例；如图：

定义一个组件，组件绑定一个事件，并向外抛出change_事件，然后在mounted的钩子函数中监听这个事件，即可得到另一个组件中的值；

Vue组件通信：Bus使用方法
CsCufft的博客
10-04 211
在上面的示例中，当ComponentA中的按钮被点击时，它会通过Bus实例触发一个名为"message"的事件，并传递消息"Hello from ComponentA"。在Vue.js中，组件是构建应用程序的基本单元，并且组件之间的通信是非常重要的。因此，在使用Bus时，要谨慎设计组件之间的通信逻辑，避免出现混乱的代码结构和不必要的依赖关系。然后，在需要进行组件通信的组件中，你可以使用Bus实例来触发和监听事件。通过使用Bus实例，我们可以在不同的组件之间进行灵活的通信。如有疑问，请随时提问。
Vue3 中的 bus.$emit：实现组件通信的强大工具
专注基础架构领域
07-12 1189
bus.$emit的重要性体现在以下几个方面： 实现组件通信：在 Vue 中，组件之间通常是独立的，无法直接访问彼此的状态或方法。通过使用bus.$emit，我们可以在不同的组件之间传递事件，从而实现组件通信。 解耦组件：使用bus.$emit可以避免在组件之间直接依赖和耦合。组件只需要监听感兴趣的事件，并在事件发生时做出相应的反应，而无需关心事件的来源和具体实现。 可复用性：通过将事件和事件监听器抽象到一个全局的bus对象中，可以提高代码的可复用性。不同的组件可以共享同一个bus，并在需要时进行通信
vue Bus总线
weixin_34238642的博客
09-05 243
有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。 参考：http://blog.youkuaiyun.com/u013034014/article/details/54574989?locationNum=2&fps=1 例子：https://segmentfault.com/q/1010000007491994...
VueBus 传值 在登录里的例子
qq_40250122的博客
09-05 283
1 定义vuebus VueBus.js /** * bus * @Author Canaan * @Date 2018/6/7. */ const install = function (Vue) { /** * 环境 * @type {{}} */ Vue.prototype.$env = { LOGIN_SUCCESS...
vue-bus
最新发布
KUAILEZHENWO的专栏
12-27 411
Vue-Bus是一个专为Vue.js设计的事件总线插件，它允许在不同的Vue组件之间轻松地发送和接收事件，从而实现组件间的通信。
Vue bus
Koini
07-09 509
bus主要实现组件之间的通信，较于组件之间的子传父，父再传另一子组件方便了很多 首先创建一个bus.js import Vue from 'vue' const bus = new Vue() export default bus 父页面 <template> <div class="demo-wrapper"> <comA /> <comB /> </div> </template> <script&
浅谈vue中$bus的使用和涉及到的问题
01-19
使用过的都知道$bus是兄弟之间相互传值的项目中说实话用的地方不算多但是也会用到（每一个领域都是会有坑的呀）。 1：创建$bus文件 创建一个文件内容如下： import Vue from ‘vue’ export default new Vue(); 2...
Vue实战指南：Vue中EventBus的使用方法
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-17 3573
在构建复杂前端应用时，组件间的通信是必不可少的一环。Vue.js 提供了多种方式来实现这一目标，包括父子组件间的props传递、自定义事件、Vuex等。然而，在某些场景下，如果多个无直接父子关系的组件需要进行通信，则可以采用全局事件总线（Global EventBus）的方式。本文将详细介绍如何在Vue项目中实现并利用EventBus来促进组件间通信，帮助你更高效地组织和管理应用逻辑。
vue-bus-适用于Vue.js的微型简单中央事件总线插件2。-Vue.js开发
05-27
vue-bus一个很小的简单的中央事件...（655字节gzip）安装下载并与构建系统一起使用，从'vue-bus'//导入VueBus // ...也许... var VueBus = require（'vue-bus'）// ...和... Vue.use（VueBus）或仅将其包含在脚本标签中
【Vue3】中全局事件总线 $bus 的使用
Kyrie__Wu的博客
07-23 5491
【Vue 3】中全局事件总线 $bus 的使用
vue bus
qq_43427657的博客
08-31 166
vue bus使用 新建bus.js import Vue from 'vue' const bus = new Vue() export default bus 在需要用到的组件引入 import bus from "../bus" 在A组件使用传参： e：需要传的参数 bus.$emit('handClick',e) 在B组件使用： e:接收传过来的参数 mounted () { bus.$on('handClick', e=>{ console.log(e)
vue Bus的使用
weixin_67490903的博客
09-09 285
问题：但这种引入方式，经过webpack打包后可能会出现Bus局部作用域的情况，即引用的是两个不同的Bus，导致不能正常通信。然后在子组件中通过this.$root.Bus.$on(),this.$root.Bus.$emit()来调用。注意：注册的总线事件要在组件销毁时卸载，否则会多次挂载，造成触发一次但多个响应的情况。第①种：可以直接将Bus注入到Vue根对象中。到vue.prototype上，
vue bus 组件通讯 应用示例
hanjiaqian的博客
08-14 186
1、新建bug.js文件 import vue from 'vue'; const Bus = new vue(); export default Bus; 2、父组件引入bus.js文件 created方法中写：bus.$on('getTarget',targat=>{ }); 3、子组件引入bus.js文件 子组件方法触发 bus.$emit("getTarget",param); 结束，感谢观看，共同学习； ...
vue bus 使用
weixin_41481695的博客
03-05 175
简单记录一下vue bus 实现组件之间传值
vue bus的使用
记事本
12-09 265
使用Bus.js进行兄弟(非父子)组件通信 1.首先写bus.js文件 任意地方添加一个bus.js，在bus.js里面 写入下面信息 import Vue from 'vue'; const bus = new Vue(); export default bus; 2.在需要通信的组件都引入bus.js from后面就改成你的所放bus.js文件的位置 import Bus from './bus.js' 3.需要发送事件的组件使用 bus.$emit 发送事件 this.$bus.$emit('te
vue中bus的使用
我们一起学前端
07-25 3655
一、新建bus.js import Vue from 'vue' export const bus = new Vue() 二、引用bus.js，发送消息 import {bus} from './bus' bus.$emit('test', 11) 三、引入bus.js,接受消息 import {bus} from './bus' bus.$on('test', function (msg)...
vue 使用 eventBus
A secret makes a woman woman.
07-18 496
文件 vue-bus.js const install = function (Vue) { const Bus = new Vue({ methods: { emit (event, ...args) { this.$emit(event, ...args); }, ...
兄弟组件通信（vue-bus）（vue）
weixin_61285710的博客
01-13 703
vue提供父子组件通信，父子组件之间通信主要通过：父传子——prop、字传父——$emit、调用上一级或者上上级：$parent、调用最顶级：$root、父组件调用子组件的方法:$children或$refs 兄弟传值——vue-bus 解决： 有一个插件：vue-bus，安装bus后可解决此问题 官网地址：https://www.npmjs.com/package/vue-bus .
vue学习计划表案列
03-17
- 在项目中应用Vue的各种功能和特性 - 学习如何使用Vue的开发工具和调试工具 4. 深入学习Vue的高级特性： - 学习Vue的动画和过渡效果 - 掌握Vue的异步组件和懒加载 - 学习Vue的服务端渲染（SSR）和静态站点...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Agwenbi

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

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

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

打赏作者

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

抵扣说明：

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

余额充值