vue 非父子組件之間的通信--eventBus

非父子組件之間的通信有兩種方法：eventBus，vuex。這裏先只記錄下eventBus的使用方法。

例如：一個父組件中同時引入A組件和B組件，A組件中點擊觸發後將數值10傳到B組件中。

第一步：定義一個公共的實例文件eventBus.js，作爲中間倉庫來傳值。

//eventBus.js
import Vue from 'vue'
export default new Vue()

第二步：使用$emit發送事件

A組件：

<template>
  <div>
    A組件:
    <span>{{elementAvalue}}</span>
    <input type="button" value="點擊觸發" @click="elementByValue">
  </div>
</template>

<script>
  // 引入公共的eventBus
  import eventBus from './../eventBus.js'
  export default{
    name: 'componentA',
    data(){
      return {
        elementAvalue: 10
      }
    },
    methods:{
      elementByValue(){
        //$emit發送事件
        eventBus.$emit('getValue', this.elementAvalue)
      }
    }

  }
</script>

第三步：使用$on接收事件

B組件：

<template>
  <div>
    B組件:
    
    <span>A組件傳過來的值：{{elementBvalue}}</span>
  </div>
</template>
<script>
import eventBus from './../eventBus.js'
export default{
  data(){
    return {
      elementBvalue:''
    }
  },
  created(){
    //$on事件來接收傳遞過來的參數
    eventBus.$on('getValue',(data)=>{
        console.log(data)
        this.elementBvalue = data
      })
  }
}
</script>