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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/adley_app/article/details/84781118

利用new 一个新的vue实例，可以轻松实现组件之间数据通信。

方法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()