Vue组件之间数据通信之 Bus事件总线

方法1 新创建一个Bus的js模块

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

// 组件Com1
import Bus from './Bus'
export default {
     data() {
        return {
         val: 0
      }
     },
    methods: {
        changeVal(){
          this.val += 10;
          Bus.$emit('val', this.val)
       }
    },
}    

// 组件Com2
import Bus from './Bus'
export default {
    data() {
        return {
            val: 0
        }
    },
    mounted () {
       Bus.$on('val', data => { 
          this.val = data;
        });    
   }    
} 

// 点击组件1，就可以改变组件2中的值。      

方法2 直接将Bus对象挂载到Vue根实例上

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

const app= new Vue({
    el:'#app',
　　 data:{
　　　　Bus
    }　　
    router,
    store
});

// 组件中使用
this.$root.Bus.$on()
this.$root.Bus.$emit()