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