Vue组件通信之Bus
2023-09-27 14:26:44 时间
关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里。
在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中使用Echarts】在Vue中优雅的使用Echarts——图表轮播图、Echarts图表组件封装、节流函数优化图表性能
- 给vue组件传递对象或是数组
- Vue 非单文件组件
- 两步创建vue全局组件
- 134/(前端)订单列表布局与显示——子组件挂载的方式与分类管理vue的结构搭建
- vue-loader 作用
- Vue.js之组件传值
- Vue 路由组件传参的 8 种方式
- js之封装(秒数)转化为时分秒倒计时组件 vue版本
- vue父子组件通信传值
- 一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端)
- 场景类:实现vue组件重新加载
- vue系列:vue页面白屏&资源路径不对
- 一个Java程序猿眼中的前后端分离以及Vue.js入门
- Vue.js 2使用中的难点举例--子组件,slot, 动态组件,事件监听
- 说说 Vue 中组件的缓存
- Vue全局组件开发,Vue.use(xxx)一次引入,全局使用 【Vue 非父子组件通信】
- 基于vue2 + vue-router + vuex + ES6 + less + flex.css重写vue版cnode社区,使用webpack打包
- Vue-Router + Webpack 路由懒加载实现