全局事件总线 (GlobalEventBus)

一、一种组件间通信的方式，适用于任意组件间通信。
二、安装全局事件总线：

new Vue({...BeforeCreate() {Vue.prototype.$bus = this; // 安装全局事件总线, $bus 就是当前的应用的 VueComponent 实例对象}
})

三、使用事件总线

接收数据：A组件想接收数据，则A组件中给 $bus 绑定自定义事件，事件的回调在A组件中

methods() {demo(data) {...}
}
mounted() {this.$bus.$on('xxx', this.demo);
}

提供数据 this.$bus.$emit('xxx', 数据)

四、最好在 beforeDestroy 钩子中，用 $off 去解绑当前组件所用到的事件

全局事件总线 (GlobalEventBus)相关推荐

【Vue2.0】— 全局事件总线GlobalEventBus（十九）
[Vue2.0]- 全局事件总线GlobalEventBus(十九) main.js import Vue from 'vue' import App from './App.vue' Vue.con ...
「后端小伙伴来学前端了」Vue中全局事件总线（GlobalEventBus）原理及探究过程
前言上一篇文章写了 Vue 中的自定义事件,自定义事件是全局事件总线基础.我在上一篇文章中埋下了一个小小的伏笔.如下图: 我说过,在Vue中如果我们用(@orv-on)给组件绑定上一个自定义事件,其 ...
Vue | 使用Vue脚手架【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】
文章目录脚手架的基本使用初始化脚手架分析脚手架结构 render函数修改默认配置 ref属性 props属性 mixin混入插件 scoped样式 Todo-list案例组件化编码流程(通 ...
「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
月亮啊月亮你能照见南边,也能照见北边照见她,你跟她说一声,就说我想她了. 前言前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式.父组 ...
【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用
文章目录一.本地存储 1.概念 2.接口 3.实际操作二.自定义事件绑定 1.自定义事件使用过程 2.绑定自定义事件的语法 3.其他注意事项三.全局事件总线 1.全局事件总线概念 2.全局事件总 ...
Vue的全局事件总线实现任意组件间通信
全局事件总线原理:利用自定义事件实现在main.js中安装全局事件总线 import Vue from 'vue'; import App from 'App.vue'; new Vue({rend ...
Vue（组件间通信：props、自定义事件、全局事件总线、消息订阅与发布）
一.props props不仅可以实现父给子传递信息,还可以进行子给父传递信息 1.父给子传递信息: 父组件中给子组件实例传递信息子组件利用props进行接收组件传递信息(接收方式有三种:数组.对象 ...
vue3组件通信的方式父传子 props 和子传父 $emit 非父子组件的通信Provide和Inject 全局事件总线mitt库
vue3组件通信的方式一.父传子 props 和子传父 $emit 1.父传子 props 在开发中最常见的就是父子组件之间通信,父组件往子组件通信使用的是props.子组件往父组件通信则使用的是 ...
学习记录492@vue全局事件总线
适用于复杂的组件之间的通讯,需要一个全局的东西,作用为中间件,其他组件对这个全局的东西注册一个事件,其他组件要通讯就触发这个全局东西的事件就可以了. 如A要接收B的数据,找到一个全局的X,A中给X绑定 ...

全局事件总线 (GlobalEventBus)

全局事件总线 (GlobalEventBus)相关推荐

最新文章

热门文章