Vue組件之間通訊，父到子，子到父，非父子組件之間數據傳遞梳理

1、父組件=》子組件傳遞數據

一、子組件在props中建立一個屬性，用以接收父組件傳過來的值
二、父組件中註冊子組件
三、在子組件標籤中添加子組件props中建立的屬性
四、把須要傳給子組件的值賦給該屬性

2、子組件=》父組件傳遞數據

*當子組件須要向父組件傳遞數據時，就要用到自定義事件。
一、子組件中須要以某種方式例如點擊事件的方法來觸發一個自定義事件
二、將須要傳的值做爲$emit的第二個參數，該值將做爲實參傳給響應自定義事件的方法
三、在父組件中註冊子組件並在子組件標籤上綁定對自定義事件的監聽

3、非父子組件傳遞數據

一、新建一個eventBus.js文件，在裏面新建一個vue實例，這個實例就承擔起了組件之間通訊的橋樑了，也就是中央事件總線
二、而後給每一個子組件綁定一個方法(觸發時候發佈eventBus),在每一個子組件作一個訂閱的監控,觸發綁在created裏的方法執行

在通訊中，組件之間傳值，他們都有一個共同點就是有中間介質，
*子向父的介質是自定義事件
*父向子的介質是props中的屬性
*非父子組件的介質是中央事件總線
抓準這三點對於組件之間通訊就好理解了

vue-cli建立的項目，附上精簡的代碼與圖片：

HelloWorld.vue

<template>
  <div class="hello">
    <h1>hello標題</h1>
    <!-- // 在子組件標籤child-aa上綁定myEvent對自定義事件的監聽 -->
    <child-aa :myProp="toChildA" @myEvent="touchMe"></child-aa>
    <div>孩子，你貴姓：{{getByChildA}}</div>
    <child-bcd></child-bcd>
  </div>
</template>

<script>
import childAa from './childA'
import childBcd from './childBcd'
export default {
  name: 'HelloWorld',
  data () {
    return {
      toChildA: '給子組件childA傳字符串內容', // 把須要傳給子組件的值賦給該屬性
      getByChildA: ''
    }
  },
  components: {
    childAa, // 父組件中註冊子組件
    childBcd
  },
  methods: {
    touchMe(obj) { 
      this.getByChildA = obj.age
    }
  }
}
</script>

childA.vue

<template>
  <div class="childA">
    <h3>這裏是childA</h3>
    <div>
      {{myProp}}
    </div>
    <button @click="doSomething">
      給父組件傳個信息
    </button>
    <h3>兄弟組件傳什麼過來了：{{brotherInfo}}</h3>
  </div>
</template>

<script>
import $bus from '../untils/eventBus'
export default {
  name: 'childA',
  data () {
    return {
      brotherInfo: ''
    }
  },
  props: {
    myProp: {
      type: String // 子組件在props中建立一個屬性，用以接收父組件傳過來的值
    }
  },
  methods: {
    doSomething() { // 子組件中須要以某種方式例如點擊事件的方法來觸發一個自定義事件
      this.$emit('myEvent', {age: 'lihongwei'}) // 將須要傳的值做爲$emit的第二個參數，該值將做爲實參傳給響應自定義事件的方法
    }
  },
  created() {
    $bus.$on('myEvent',(brotherInfo) => {
      this.brotherInfo = brotherInfo
    })
  }
}
</script>

<style scoped>
.childA{
  padding: 30px;
  border: 5px solid #ddd;
}
</style>

childBcd.vue

<template>
  <div class="childBcd">
    <h3>這裏是childBcd</h3>
    <button @click="toBrother">
      給chidA傳個信息
    </button>
  </div>
</template>

<script>
import $bus from '../untils/eventBus'
export default {
  name: 'childBcd',
  data () {
    return {
    }
  },
  methods: {
    toBrother() {
      $bus.$emit('myEvent', '兄弟,你好')
    }
  }
}
</script>

<style scoped>
.childBcd{
  padding: 30px;
  border: 5px solid #ddd;
}
</style>

eventBus.js

import Vue from 'vue'
export default new Vue()