vue-bus 组件实现非父子组件通信(及需注意地方)

原创 DarkNight 随笔 vue 459阅读 2018-08-29 16:52:51 举报

vue-Bus 是 Vue.js 事件中心的一个插件


背景

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 进行安装

然后在你的工程里 main.js引用就可以了


使用及需要注意的地方

第一种使用场景 两个组件同时在一个路由下创建组件独立引用


组件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组件生命周的问题,还有组件销毁之前需要注销监听事件避免在组件内多次调用函数

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复