Vue 2.0学习笔记：事件总线（EventBus）

最新推荐文章于 2023-11-24 16:41:34 发布
最新推荐文章于 2023-11-24 16:41:34 发布
阅读量508 收藏
点赞数
MJ
本文链接：https://blog.csdn.net/gbwine/article/details/84433074
版权

许多现代JavaScript框架和库的核心概念是能够将数据和UI封装在模块化、可重用的组件中。这对于开发人员可以在开发整个应用程序时避免使用编写大量重复的代码。虽然这样做非常有用，但也涉及到组件之间的数据通讯。在Vue中同样有这样的概念存在。通过前面一段时间的学习，Vue组件数据通讯常常会有父子组件，兄弟组件之间的数据通讯。也就是说在Vue中组件通讯有一定的原则。

参考资料：

https://www.w3cplus.com/vue/event-bus.html

尼古·拉斯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
12-29
通过前面对Vue的学习，到现在我们很有必要进一步了解Vue实例中的一些特殊的属性和方法。首先要了解的是$refs属性。但是在深入到JavaScript部分之前，我们先看看模板。 <h1>{{ message }} <button @click=...
vue2.0--:vue2.0路由的简单搭建
05-11
在这个“vue2.0--:vue2.0路由的简单搭建”教程中，我们将重点讨论如何在Vue 2.0项目中集成并设置Vue Router，以便实现页面间的导航和组件的动态加载。 Vue Router是Vue.js官方的路由管理器，它与Vue.js深度集成，...
事件总线EventBus
yangguosheng的专栏
11-19 6204
什么事件总线，又“总”在何处。事件总线的简单实现。
【Vue项目】 bus事件总线
Allen_Sushi首页
11-17 1604
Vue2 bus事件总线的原理与使用
Vue-中央事件总线（bus）
qq_56973906的博客
09-09 3445
通过创建一个新的vm对象,专门统一注册事件,供所有组件共同操作,达到所有组件随意隔代传值的效果也就是：各个组件内部要传输的数据或者要执行的命令信息，靠bus来通信。我们知道子组件向父组件传值可以通过将自定义事件的方法来进行，那么如果我们把事件绑定在所有组件都能访问的地方，然后想要给某个组件通信，直接触发这个事件。//1.触发x组件的a事件: x.$emit("a事件",参数...)//2.给x组件绑定a事件 x.$on("a事件",监听器函数)
vue之事件总线
Jack, what else can you do besides holding your little darling?
10-25 364
1.事件总线介绍 在vue中跨越层级的两个组件进行通信，若使用props传值和$emit触发的方式会十分繁琐，而事件总线的通信方式更适合跨越层级的组件通信。 2.事件总线原理 事件总线可以用一个对象来表示每一个事件 都有一个数组来记录这个事件的监听者 { "event1": [hander1, hander2], "event2": [hander1, hander2, hander3], } 1，若给某个事件添加监听者，就把处理函数添加到这个事件对应的数组中去 2，若给某个事
Vue事件总线以及原理探究
BeSentimental的博客
08-05 1328
一、引入事件总线 只需在main.js的创建Vue实例vm之前的时候引入 首先，原理是使用Vue创造的实例vm或者说VueComponent创建的实例vc身上的$on和$emit属性，两者作用的实例必须为同一个，根据这个原理可以写出几种创建事件总线的方法： 第一种方法，你可以在VueComponent的实例对象身上创建： 在入口文件main.js中，可以在new Vue({})（创建Vue实例vm）之前这样写 在这里说一下，在main.js 中无法直接获取VueComponent构造函数，Vue的源码里是通
vue2.0-project:Vue2.0企业级移动端App
04-08
Vue2.0-project是一个基于Vue2.0框架构建的企业级移动端应用程序示例。这个项目旨在展示如何使用Vue.js 2.0及其相关生态工具来开发一个功能完善的移动应用。Vue.js是一个轻量级的前端JavaScript框架，以其简洁的API...
vue2.0学习笔记文件.zip
01-13
这份“vue2.0学习笔记文件.zip”包含了作者在学习Vue2.0过程中的笔记和相关项目文件，虽然缺少了某些特定的案例和依赖，但它仍能为我们提供宝贵的参考。 首先，`web.config`可能是用于Web应用程序配置的文件，通常...
Vue2.0-project:vue2.0 + vuex + vue-router + axios
05-30
#这是vue2.0的项目基础 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production ...
【Vue全局事件总线详解】
热门推荐
小田是个程序员的博客欢迎你的到来呀~
04-05 1万+
全局事件总线是一种组件间通信的方式，适用于任意组件间通信。全局事件总线并不是插件，配置文件等等，事件总线是程序员在做Vue开发中总结积累的一套方法，是一套规则，只要满足这套规则，就可以实现组件间的通信。
eventBus的原理
mz929的博客
07-16 529
Vue中的EventBus是一种事件总线，用于在组件之间进行通信。它的原理是通过创建一个全局的Vue实例作为中央事件总线，其他组件可以通过该实例来订阅和发布事件。这种机制可以实现不同组件之间的解耦，使得组件之间可以方便地进行通信和数据传递。但同时也需要注意避免滥用EventBus，因为过多的全局事件会导致代码维护和调试困难。2.在传递数据的组件中通过。3.在接收数据组件中通过。EventBus的使用。
VUE2中的组件间通信（全局事件总线）
m0_64227118的博客
11-12 217
1.原理图：tips：小粉就是中间负责传输数据的2.vue与vuecomponent的关系3.将x（全局都能看见的组件）加在vue的原型对象上，因为只有一个vue原型对象（prototype）​​​​​​​在哪引入的vue就在哪操作vue的原型对象（main.js）$bus:总线放置函数：触发回调触发。
Vue2 中使用“全局事件总线“实现任意组件间通信
weixin_52212950的博客
11-29 2553
vue 中组件间通信的方式有很多 ------ 父传子propos，全局事件总线，消息订阅，vuex......等等，这篇文章带大家学习一下通过全局事件总线来实现任意组件间的通信。
eventBus的基本用法
qq_36939013的博客
07-02 563
eventBus主要用来传递绑定事件，绑定给EventBus里面，然后别的js文件可以触发eventBus里面的事件 这里绑定了4个事件 //播放时间 eventBus.on("videoTime",function (time) { console.log("当前时间", time); }) //暂停 eventBus.on("videoPause",function () { ...
浅谈Vue中的bus事件总线注意事项
weixin_42390185的博客
10-30 1390
问题：路由切换后，事件总线的方法被多次执行。 解决：在beforeDetory钩子里使用$off解绑事件。 例如：如果你在Vue原型上是这样绑定的：Vue.prototype.$bus = this， 那么解绑时是：this.$bus.$off(‘方法名’, callback) 最近在用vue写自己的网站的时候，碰到了一个令我百思不得其解的事情。以前用单组件和多组件都没有碰到过。经过我的多次排查，发现Vue上的bus总线的事件绑定方法被多次执行，而我却找不到解决的头绪… 我使用vue-router路由、
什么是Vue中的事件总线机制（EventBus）
bug处理进行时
06-06 2692
Vue事件总线机制 - EventBus 事件总线产生的背景 在vue中最核心的部分就是组件，组件间的通信就是重中之重。通信分为父子组件通信、兄弟组件通信、不相干的组件通信等等多种方式。父级向子级通过props传递数据，子级通过 $emit 向父组件通知事件。但是当两个毫不相关的组件互相通信时应该通过什么来实现呢？ EventBus的简介 EventBus 又称时间总线 ，理解上来讲 EventBus 机制是通知的概念，EventBus作为所有组件共享的事件中心，既可以发送事件也可以接受事件，所有组件都可以
Vue中全局事件总线$bus使用
最新发布
欢愉码农的博客
11-24 646
$bus全局事件总线使用广泛，可以实现多重身份组件之间的通信。且可传递参数，执行回调。
Vue事件总线
Xwz的博客
04-18 6126
1.常见的组件通信方式 pros:父组件传子组件 自定义事件:子组件传父组件 vuex:均可实现 插槽:父组件传子组件 pubsub-js:均可实现（较少用） $bus全局事件总线:均可实现 2.事件总线的介绍 如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的事件总线来实现。塔相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件,它就类似沟通桥梁的概念...
Vue2.0 基础笔记：MVVM设计模式和组件化思想
<div id="app"></div>", data:{ message:"Hello Vue!" } }); 2.2 模板语法模板语法是一种特殊的 HTML 语法，用来将模板中的数据渲染到页面上，在模板中使用双大括号{{}}包含数据，被包含的数据会被渲染到页面上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值