vue組件化開(kāi)發(fā)是一個(gè)非常美妙的過(guò)程，因?yàn)闇p少了代碼之間的耦合度，提高了復(fù)用性，直接就是我們開(kāi)發(fā)人員的福音。

但是組件歸組件，組件之間也有幾種不同的關(guān)系，不同的關(guān)系要有對(duì)應(yīng)的通信方法才是道理，比如組件之間關(guān)系圖就像是下面的一樣，組件還不止這些，那這些復(fù)雜的組件通信應(yīng)該怎么處理呢？

接下來(lái)我將介紹一下vue常見(jiàn)的兩種種組件通信方式。

父子通信「props / $emit」

父?jìng)髯?/h3>

我想從父組件傳一個(gè)數(shù)據(jù)給子組件，也就是上圖的從app組件傳到A組件，我可以先在App.vue組件定義一個(gè)數(shù)組，然后通過(guò)v-bind的方式綁定到子組件。

<template>
  <div id="app">
    <Child :ancient='ancient'/>
  </div>
</template>

<script>
import Child from './views/Child.vue'
export default {
  data () {
    return {
      ancient: ['床前明月光', '疑似地上霜', '舉頭望明月', '低頭思故鄉(xiāng)']
    }
  },
  methods: {

  },
  components: {
    Child
  }
}
</script>

然后再在子組件通過(guò)props接收，然后循環(huán)渲染上去就好啦！

<template>
  <div>
    <ul>
      <h2>靜夜思</h2>
      <h4>李白</h4>
      <li v-for="item in ancient" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    ancient: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      demoList: [111, 222, 333]
    }
  }
}
</script>

瀏覽器效果：

子傳父

想在子組件傳參數(shù)給父組件，首先我們?cè)谧咏M件創(chuàng)建一個(gè)點(diǎn)擊事件，然后我們通過(guò)點(diǎn)擊觸發(fā)$emit事件將想要傳遞的值發(fā)送過(guò)去。

<template>
  <div>
    <input type="text" v-model="myText">
    <button @click="handleClick">提交</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      myText: '請(qǐng)寫出你的計(jì)劃'
    }
  },
  methods: {
    handleClick () {
      console.log(this.myText)
      this.$emit('setMessage', this.myText)
      this.myText = ''
    }
  }
}
</script>

然后我們?cè)诟附M件通過(guò)on監(jiān)聽(tīng)子組件的事件并接收傳遞過(guò)來(lái)的值然后再觸發(fā)這邊的事件，從而達(dá)到子傳父的目的。

<template>
  <div id="app">
    <Child v-on:setMessage="getMessage"/>
    <ul>
      <li v-for="item in demoList" :key="item">{{item}}</li>
    </ul>
  </div>
</template>

<script>
import Child from './views/Child.vue'
export default {
  data () {
    return {
      demoList: ['計(jì)劃1', '計(jì)劃2', '計(jì)劃3']
    }
  },
  methods: {
    getMessage (text) {
      this.demoList.push(text)
    }
  },
  components: {
    Child
  }
}
</script>

瀏覽器如下表示：

兄弟通信

兄弟通信比較推薦用bus通信，因?yàn)榭梢灾苯觾蓚€(gè)組件之間互相通信從而省去了子傳父再傳子兩個(gè)步驟。

首先先聲明一輛bus，也就是在一個(gè)合適的地方創(chuàng)建一個(gè)EvenBus.js，然后內(nèi)部如下：

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

export default eventBus

然后有人可能會(huì)疑惑為什么要這樣引入vue實(shí)例。先帶著這個(gè)疑問(wèn)繼續(xù)看下去。

然后我將兩個(gè)組件放在App組件內(nèi)，分別是BroderB.vue和BroderD.vue。

APP.vue

<template>
  <div id="app">
    <BorderB />
    <BorderD />
  </div>
</template>

<script>
import BorderB from './views/BroderB.vue'
import BorderD from './views/BroderD.vue'
export default {
  data () {
    return {

    }
  },
  methods: {

  },
  components: {
    BorderB,
    BorderD
  }
}
</script>

然后我們先看BroderB.vue

<template>
    <div>
    <input type="text" v-model="myText">
    <button @click="handleClick">提交</button>
    </div>
</template>
<script>
import evenBus from '../util/EvenBus'
export default {
  data () {
    return {
      myText: ''
    }
  },
  methods: {
    handleClick () {
      evenBus.$emit('setMessage', this.myText)
    }
  }
}
</script>

我這里引入了EvenBus，然后通過(guò)點(diǎn)擊事件觸發(fā)事件，然后這里回應(yīng)為什么要實(shí)例，因?yàn)槊總€(gè)實(shí)例都有emit 方法，當(dāng)然也有監(jiān)聽(tīng) $on 方法。然后傳遞這個(gè)事件和值出去。

然后再在BroderD.vue接收

<template>
    <div>
    <h1 v-for="item in demoList" :key="item">{{item}}</h1>
    </div>
</template>
<script>
import evenBus from '../util/EvenBus'
export default {
  data () {
    return {
      demoList: ['111', '222', '333']
    }
  },
  methods: {
    handleGet (msg) {
      this.demoList.push(msg)
    }
  },
  mounted () {
    evenBus.$on('setMessage', this.handleGet)
  },
  beforeDestroy () {
    evenBus.$off('setMessage', this.handleGet)
  }
}
</script>

在這個(gè)組件的mounted鉤子函數(shù)中監(jiān)聽(tīng)這個(gè)$on事件，并觸發(fā)這里的方法，從而讓兩個(gè)組件產(chǎn)生通信，然后就是這里的方法接收值并使用值了

然后也有人會(huì)問(wèn)，為什么后面還有一個(gè)beforeDestroy的鉤子函數(shù)，那肯定是有作作用的，當(dāng)我們結(jié)束這個(gè)組件的時(shí)候最好就是讓這個(gè)evenBus解綁，因?yàn)槿绻陧?xiàng)目中的話，可能會(huì)存在某些奇奇怪怪的問(wèn)題。

然后我們看瀏覽器如下