Vue组件通信之Bus的具体使用
关于组件通信我相信小伙伴们肯定也都很熟悉，就不多说了，对组件通信还不熟悉的小伙伴移步这里。
在vue2.0中 $dispatch 和 $broadcast 已经被弃用。官方文档中给出的解释是：
因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好，我们也不希望在以后让开发者们太痛苦。并且$dispatch 和 $broadcast 也没有解决兄弟组件间的通信问题。
官方推荐的状态管理方案是 Vuex。不过如果项目不是很大，状态管理也没有很复杂的话，使用 Vuex 有种杀鸡用牛刀的感觉，当然，这也是要根据自己的需求来的，只是建议。
vue官方文档中有这样一个定义：非父子组件的通信，内容很少，如下：
其实关于这个非父子组件通信的demo还是有的，它藏在了$dispatch 和 $broadcast的迁移文档中，有兴趣的小伙伴可以点击进去查看。文档中的建议就是：
对于$dispatch 和 $broadcast最简单的升级方式就是：通过使用事件中心，允许组件自由交流，无论组件处于组件树的哪一层。由于 Vue 实例实现了一个事件分发接口，你可以通过实例化一个空的 Vue 实例来实现这个目的。
这个集中式的事件中间件就是 Bus。我习惯将bus定义到全局：
app.js
var eventBus = {
install(Vue,options) {
Vue.prototype.$bus = vue
}
};
Vue.use(eventBus);
然后在组件中，可以使用$emit， $on， $off 分别来分发、监听、取消监听事件：
分发事件的组件
// ...
methods: {
todo: function () {
this.$bus.$emit('todoSth', params); //params是传递的参数
//...
}
}
监听的组件
// ...
created() {
this.$bus.$on('todoSth', (params) => { //获取传递的参数并进行操作
//todo something
})
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy () {
this.$bus.$off('todoSth');
},
如果需要监听多个组件，只需要更改 bus 的 eventName:
// ...
created() {
this.$bus.$on('firstTodo', this.firstTodo);
this.$bus.$on('secondTodo', this.secondTodo);
},
// 清除事件监听
beforeDestroy () {
this.$bus.$off('firstTodo', this.firstTodo);
this.$bus.$off('secondTodo', this.secondTodo);
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇解决vue点击控制单个样式的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue-cli解决IE浏览器sockjs-client错误方法
这篇文章主要为大家介绍了vue-cli解决IE浏览器sockjs-client错误方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
今天小编就为大家分享一篇vue forEach循环数组拿到自己想要的数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
解决antd的Form组件setFieldsValue的警告问题
这篇文章主要介绍了解决antd的Form组件setFieldsValue的警告问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
在前端开发中，如果需要模拟后端数据，而又不想开发一个后端服务器， 则可以借助mock.js配置一个后端服务器来返回前端需要的数据，本文将会分别介绍在Quasar项目和Vite项目中Mock服务器的配置方法2022-12-12
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
今天小编就为大家分享一篇解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vuei18n 在数组中的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
computed又被称作计算属性，用于动态的根据某个值或某些值的变化，来产生对应的变化，computed具有缓存性，当无关值变化时，不会引起computed声明值的变化。产生一个新的变量并挂载到vue实例上去2022-10-10
vue项目如何使用three.js实现vr360度全景图片预览
这篇文章主要介绍了vue项目如何使用three.js实现vr360度全景图片预览,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue3+vite使用jsx和tsx详情，文章通过安装@vitejs/plugin-vue-jsx展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-05-05
最新评论