Vue的总线机制

最新推荐文章于 2024-09-19 09:41:23 发布
最新推荐文章于 2024-09-19 09:41:23 发布
阅读量655 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： Vue bus Vue总线机制 Vue发布订阅模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38402659/article/details/87902588
本文介绍了Vue中非父子组件间的通信方式——总线机制，即使用发布订阅模式。通过在Vue原型上创建一个名为Bus的属性，并绑定Vue实例，利用其上的on和$emit方法进行事件监听和触发。通常在组件的mounted阶段进行事件监听。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

非父子组件传值
1,vux
2,发布订阅模式在Vue中称为总线机制,使用Bus实现,又称为观察者模式
Vue.prototype.bus=newVue()在Vue的原型对象上绑定一个Bus属性，这个属性的值是一个Vue实例,这个实例上有bus = new Vue() 在Vue的原型对象上绑定一个Bus属性， 这个属性的值是一个Vue实例,这个实例上有bus=newVue()在Vue的原型对象上绑定一个Bus属性，这个属性的值是一个Vue实例,这个实例上有on与$emit方法
on监听事件,on监听事件,on监听事件,emit触发监听的事件
一般在组件的mounted钩子函数中监听事件

Vue 事件机制与自定义事件：解构事件传递与事件总线
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
11-26 666
在 Vue 中，事件机制是非常核心的一部分，它让组件之间能够高效地进行通信。无论是父子组件之间的通信，还是多个不相关的组件之间的事件传递，Vue 都提供了灵活的机制来应对这些需求。本文将带你深入了解 Vue 的事件机制和自定义事件，特别是如何利用事件总线解构事件的传递。Vue 的事件机制主要用于组件之间的通信。最基本的事件机制是通过 v-on指令（简称）绑定事件处理器，响应用户的交互操作。Vue 内部通过事件系统来进行数据流的传递和监听。父子组件之间的通信。
在Uni中使用Vue的EventBus总线机制操作
10-15
在Vue开发中，有时我们需要在不直接存在父子或兄弟关系的组件之间传递数据，这时可以利用EventBus（事件总线）这一技术。EventBus是一种轻量级的通信方式，它基于Vue实例，允许我们在不同组件之间共享数据和触发事件...
vue总线机制(bus)知识点详解
10-15
在本篇文章中小编给大家整理的是关于vue总线机制(bus)知识点总结，有兴趣的朋友们可以跟着学习下。
Vue中 事件总线（eventBus）详解及使用
热门推荐
明天也要努力的博客
03-06 1万+
传送门：Vue中 子组件向父组件传值 及 .sync 修饰符 详解 传送门：Vue状态管理器（vuex）详解及应用场景 传送门：Vue中 $ attrs、$ listeners 详解及使用 1. 简介 Vue 组件中常见的有：父子组件通信、兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。 今天就来说说，如果两个页面没有任何引入和被引入关系，该如何通信呢？ 如果应用程序不需要类似 Vuex 这样的库来处理组件之
Vue 全局事件总线
Errol's Blog
04-10 8533
Vue 全局事件总线
vue非父子组件间的传值 Bus/总线机制/发布订阅模式/观察者模式
xyphf的博客
11-02 519
Bus/总线机制/发布订阅模式/观察者模式 我们需要将一个组件的子组件的数据传递给另一个组件的子组件 ① 将Vue的实例赋值给Vue.prototype.bus，这样只要我们之后调用new Vue()或者创建组件的时候，每一个组件上都会有Bus这个属性，因为每一个组件或者Vue这个实例都是通过Vue这个类来创建的，而我们在Vue的类上挂了一个Bus的属性，而且挂在Vue类的prototype上...
Vue全局总线
weixin_61687046的博客
07-15 289
全局事件总线，$bus,快递收发站
vue如何使用总线机制解决非父子组件传值的情况
guochao8的博客
12-23 190
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子组件传值(Bus/总线、发布订阅模式/观察者模式)</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist...
Vue事件总线
Xwz的博客
04-18 6287
1.常见的组件通信方式 pros:父组件传子组件 自定义事件:子组件传父组件 vuex:均可实现 插槽:父组件传子组件 pubsub-js:均可实现（较少用） $bus全局事件总线:均可实现 2.事件总线的介绍 如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的事件总线来实现。塔相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件,它就类似沟通桥梁的概念...
vue总线Bus.js
蘅潇嗜玉
11-27 1637
有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。 实际运用的时候一般把bus抽离出来；Bus.js import Vue from 'vue' const Bus = new Vue(); export default Bus; 组件调用时引入 组件1 import Bus from './Bus...
详解Vue事件总线的原理与应用：EventBus
前端梦工厂
09-19 2146
在 Vue 中，事件总线（Event Bus）是一个用于在各个组件之间进行通信的机制。它是一个独立的 Vue 实例，可以被任何组件引用和使用。事件总线的作用是提供一个中央调度器，用于发送和接收事件以及在组件之间传递数据。总结来说，Vue 的事件总线是一个简单而强大的工具，用于实现组件间的通信。通过事件总线，我们可以轻松地在不同组件之间传递数据和触发操作，提高应用程序的灵活性和可扩展性。然而，在使用事件总线时，我们也需要注意一些事项和进行优化。首先，避免命名冲突和滥用全局事件，确保事件的独立性和可维护性。
Vue中的事件总线
aYao__的博客
03-06 895
事件总线是为方便vue中组件之间的通信而出现的 核心原理： VueComponent.prototype.__proto__ === Vue.prototype 通俗来讲就是组件vc的实例对象可以访问到Vue原型对象上的方法，因此可以在vue原型对象上创建一个对象，这样所有的组件实例vc都能访问该对象从而实现组件间通信 创建事件总线： new Vue({ render: h => h(App), beforeCreate(){ Vue.prototype.$bus = t
Vue 全局事件总线 消息的订阅与发布的详细介绍与使用
yxh_live的博客
05-05 1144
Vue 全局事件总线 消息的订阅与发布的详细介绍与使用
vue.js---bus，空Vue实例作为中央事件总线
u011649691的博客
08-24 1144
&lt;div id="app"&gt; {{message}} &lt;component-a&gt;&lt;/component-a&gt; &lt;/div&gt; &lt;script&gt; var bus= new Vue(); Vue.component('component-a',{ template : '&lt;button @c..
Vue中非父子组件的传值之总线模式
qq_21987433的博客
12-19 180
1.总线模式 非父子之间传值，可以采用发布订阅模式，这种模式在 Vue 中被称为总线机制，或者叫做Bus/ 发布订阅模式 / 观察者模式 <div id="app"> <!-- 非父子组件间的传值 --> <child content="DELL"></child> <chil...
vue 的bus总线
chunchengshao0931的博客
06-17 252
bus声明 global.bus = new Vue() 事件发送 controlTabbar () { global.bus.$emit('pickUp', 'ddd') }, 事件接收 global.bus.$on('pickUp', (res) => { this.is...
Vue中使用总线bus
~
11-25 1984
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事件总线
Allen_Sushi首页
11-17 2877
Vue2 bus事件总线的原理与使用
vue3事件总线
最新发布
03-19
### Vue3中的事件总线替代方案 在Vue3中，由于`$on`, `$off`, 和 `$emit`方法已被移除[^1]，传统的基于全局对象的事件总线模式不再适用。然而，开发者可以通过其他方式来实现类似的跨组件通信功能。 #### 使用mitt...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值