Vue传值——bus总线机制

      众所周知，vue提供了很多套组件间传值的方法，父子组件直接用props和$emit就好，大型项目则用vuex，但有一种更适合在小项目中使用的非父子组件传值方法，即bus总线机制。它的用法的实现原理是前端面试中常考的。在第一次换工作的时候，几乎所有面试官都问了有关vue组件传值的几种方法，所以掌握这个知识点是很重要的。

      这种方法的原理是通过一个空的Vue实例作为中央事件总线，通过它来触发事件和监听事件，可以实现几乎任何组件间的通信，这在一些比较小的项目中是非常好用的，当然如果是简单的小项目，你也可以使用$root（但我坚决不支持这样使用，可以在面试时炫技）。接下来我们来看看在项目中的实战：

      在utils文件夹下面定义一个bus.js，这样一个中央事件总线就定好了，里面内容就这两行：

import Vue from 'vue'
export const Event = new Vue() // 定义一个事件总线

传递方：

import { Event } from '../../utils/bus'  // 引入这个事件总线
export default {
  data() {
    userId: ''
  }
  watch: {
    userId() {  // 监听userId改变时触发事件，当然你可以在所有其他事件去触发$emit
      Event.$emit('changeUser', userId) // $emit接收参数，一个是触发的事件名，一个是携带的参数
    }
}

接收方：

import { Event } from '../../utils/bus' // 依然是把bus总线引进来
export default {
created() {
    Event.$on('changeSonRoute',showIndex => {  // $on接收发送方传给我们的数据
      console.log(showIndex)
    })
  }
}

      这个方法听起来挺唬人的，但实际操作就是这么简单。