vue总线机制(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) => {
  //根据参数来进行路由跳转
})

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

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

import Vue from 'vue'
const Bus = new Vue()

var app= new Vue({
  el:'#app',
　　 data:{
　　　　Bus
  }　　

})