Vue组件通信之Bus的具体使用

前端之家收集整理的这篇文章主要介绍了Vue组件通信之Bus的具体使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步

在vue2.0中 $dispatch 和 $broadcast 已经被弃用。官方文档中给出的解释是:

因为基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好,我们也不希望在以后让开发者们太痛苦。并且$dispatch 和 $broadcast 也没有解决兄弟组件间的通信问题。

官方推荐的状态管理方案是 。不过如果项目不是很大,状态管理也没有很复杂的话,使用 Vuex 有种杀鸡用牛刀的感觉,当然,这也是要根据自己的需求来的,只是建议。@H_403_1@

vue官方文档中有这样一个定义:,内容很少,如下:

其实关于这个非父子组件通信的demo还是有的,它藏在了中,有兴趣的小伙伴可以点击进去查看。文档中的建议就是:@H_403_1@

对于$dispatch 和 $broadcast最简单的升级方式就是:通过使用事件中心,允许组件自由交流,无论组件处于组件树的哪一层。由于 Vue 实例实现了一个事件分发接口,你可以通过实例化一个空的 Vue 实例来实现这个目的。 这个集中式的事件中间件就是 Bus。我习惯将bus定义到全局:@H_403_1@

app.js@H_403_1@

然后在组件中,可以使用$emit, $on, $off 分别来分发、监听、取消监听事件:@H_403_1@

分发事件的组件@H_403_1@

监听的组件@H_403_1@

{ //获取传递的参数并进行操作 //todo something }) },// 最好在组件销毁前 // 清除事件监听 beforeDestroy () { this.$bus.$off('todoSth'); },

如果需要监听多个组件,只需要更改 bus 的 eventName:@H_403_1@

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。@H_403_1@

猜你在找的Vue相关文章