vue总线机制(bus)知识点详解

vue中非父子组件之间通信除了使用vuex，也可以通过bus总线，两者适用场景不同。

bus适合小项目、数据被更少组件使用的项目，对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅模式，利用vue的自定义事件机制，在触发的地方通过$emit向外发布一个事件,在需要监听的页面，通过$on监听事件。

vuex适用中大型项目、数据在多组件之间公用的情况。

简单介绍两者的区别之后，就要介绍下我在一个项目中遇到的一个场景了，这个场景使用bus可能更加适合些：

//main.js Vue.prototype.bus = new Vue();new Vue({ render: h => h(App) ...}).$mount(’#app’);/**通过把一个vue实例赋于Vue构造函数原型上的一个属性bus（当然起任何名称都是可以的）*而每个Vue实例都是有$emit和$on方法的*由于bus属性在Vue原型上，根据原型链查找规则，在页面中我们就可以通过 this.bus.$emit 和 *this.bus.$on来进行跨组件通信了*/

//导航栏组件中//点击事件发生时发布一个事件this.bus.$emit(’even-name’，args1, arg2 , ...) //这里我们可以把点击导航的相关信息携带出去

//路由显示页面中this.bus.$on(’event-name’, (...args) => { //根据参数来进行路由跳转})

这个事件监听 和 路由跳转的逻辑我们可以弄成一个mixins进行复用。到这样就完成了。

但是这样还是有点麻烦，每个页面都需要引入mixins，有没有更好的办法呢？答案是肯定的。我们项目导航栏是通过路由meta循环出来的，每项有对应导航栏的路由，结构如下：

{ path: ’/xxxx’, component: xxxx, meta: [ { name: ’导航1’ }, { name: ’导航2’, url: ’我是导航2的路由’ }, { name: ’导航3’, url: ’我是导航3的路由’ }, { name: ’导航4’, } ] },

在思索时我忽然发现每个导航栏的index、导航栏长度length、及router.go方法之间有一个规律，那就是我们可以把index + 1 - length作为router.go的参数，从而不用再关心query参数了，而且只需要在导航栏组件操作一次就可以了，完美！

//导航栏组件点击事件处理函数中 if (url) { const meta = this.$route.meta; this.$router.go(index + 1 - meta.length)}

知识点补充：

将Bus注入到Vue根对象中

import Vue from ’vue’const Bus = new Vue()var app= new Vue({ el:’#app’, data:{Bus }})

在子组件中通过this.$root.Bus.$on(),this.$root.Bus.$emit()来调用

以上就是vue总线机制(bus)知识点详解的详细内容，更多关于vue中总线机制的资料请关注好吧啦网其它相关文章！