vue中总线机制(bus)

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

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

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

简单介绍两者的区别之后,就要介绍下我在一个项目中遇到的一个场景了,这个场景使用bus可能更加适合些:
vue中总线机制(bus)_第1张图片

管理后台项目,这种布局是比较常见的,左侧是菜单栏,上面是面包屑导航栏,中间是子路由渲染的页面内容。在页面跳转时我们通过query传值是比较常见的,这个时候 我们点击导航栏回退的时候 如何获取到前面query传的值呢?

你可能会想到把传递的参数放到vuex来存储,点击导航栏的时候来获取,但每个页面传递参数数量是不定的,这个时候使用bus总线机制可能会比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)
}

 

你可能感兴趣的:(Vue,vue中bus总线机制,bus和vuex的不同)