Vue组件传值之bus总线

引言

在vue中组件传值有多种方式，我们最常用的是props，当然还有vuex，但是对于简单的场景，vuex显得过于复杂了，今天我们介绍另一种组件传值的方式——Bus总线

正文

使用一个空的Vue实例作为中央事件总线。实际应用中，将bus(空Vue)定义成单独的文件Bus.js

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

方法一：
在组件一中引入

import Bus from './Bus'

export default {
  data() {
      return {
          .........
          }
    },
  methods: {
      ....
      Bus.$emit('log', 0)
  }
}     

组件二

import Bus from './Bus'

export default {
  data() {
       return {
           .........
           }
     },
   mounted () {
      Bus.$on('log', content => { 
         console.log(content)
       });    
   }
}

但这种引入方式，经过webpack打包后可能会出现Bus局部作用域的情况，即引用的是两个不同的Bus，导致不能正常通信，因此我们可以直接将Bus注入到根对象中：

方法二：

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

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

})

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