背景
Vue 2.0 重新梳理了事件系统, 因为基于组件树结构的事件流方式实在是让人难以理解, 并且在组件结构扩展的过程中会变得越来越脆弱. 虽然依然保留了父子组件间的事件流, 但有诸多限制, 比如不支持跨多层父子组件通信, 也没有解决兄弟组件间的通信问题. Vue 推荐使用一个全局事件中心来分发和管理应用内的所有事件.
1. 什么基于组件树结构的事件流方式
按照我的理解比如你 2 个组件你需要把 A 组件的值 传递给 B 组件, 必然需要 B 组件依赖 A 组件, 或者是相互依赖, 类似一种父子关系或者层级关系, 以 2 个组件其中一个作为父节点就所谓的组件结构树, 子组件通过 emit 去调父组件调方法形成了一个事件流
2. 为什么使用 vue-bus
组件通信时, 我们通常会采用 props + emit 这种方式, 如果子组件想把自己的数据传递给父组件, 在子组件使用, 但当通信双方不是父子组件甚至压根不存在相关联系, 当然如果有人说可以用 vuex 啊,《海贼王》 -- 罗杰 说过每个人都自己出场的机会, 那么 vue-bus 也总会有它使用的场景之处. 使用 vue-bus 组件可以自由相互通信, 这样不依赖组件结构树, 便于解耦父子组件的关系.
如何使用 vue-bus?
老套路使用 NPM 进行安装
$ npm install vue-bus
然后在你的工程里 main.js 引用就可以了
- import Vue from 'vue';
- import VueBus from 'vue-bus';
- Vue.use(VueBus);
使用及需要注意的地方
第一种使用场景 两个组件同时在一个路由下创建组件独立引用
组件 A 代码
组件 B 代码
此时 A 组件通过一个点击事件将 数据发送给 B 就得到
这样正常的使用情况下貌似感觉没问题
第二种场景 两个组件不在同一个路由下或者说异步去加载的情况
比如我现在需要从 A 组件路由跳转到 B 组件到路由 此时 B 组件还没有被创建
A 组件代码
当点击跳转过去当时候并没有收到来 A 组件的数据
原因 :
因为在 A 组件的时候, B 组件还没生成无法监听的来自于 A 组件的事件. 这个时候当你 A 在组件 emit 事件的时候, B 组件其实是没有监听到的.
至于为什么那就谈到 vue 生命周期 请看图
那么要如何才能让 B 组件接收到来自 A 组件到数据呢?
那就需要利用到 vue 的钩子函数
A 组件代码
此时 B 组件
备注 (不过此时还没完! 需要在 B 组件销毁当时候将监听当事情给注销掉不然下一次再进入到 B 组件到时候会已倍数增加到形式去调用你所监听的方法, 比如下面实际上我跳转了 3 次而已)
解决方法 (同样利用 vue 的钩子函数只需要再 B 组件销毁前将原来的监听的事件给注销掉就可以了)
B 组件代码
这样就 OK 了
总结
有时候如果项目不是很庞大的情况下 需要独立的组件相互传值的情况下可以考虑使用 bus 来解决, 但是在使用 bus 需注意两个独立组件再不同路由下的使用情况时注意 vue 组件生命周的问题, 还有组件销毁之前需要注销监听事件避免在组件内多次调用函数
来源: http://www.qdfuns.com/article/31238/3cf8935229b387b226fbb154384078e7.html