淺析vue中的組件通訊

爲了方便展現，全部的組件都是以 單文件組件的方式編寫的

1. 父組件對子組件通訊

在父組件內使用 v-on綁定自定義事件，在子組件內使用 props傳遞 自定義的事件名稱

以下是父組件

<template>
  <div id="app">
    <child :message="title"/>
    <!--使用v-on綁定自定義事件-->
  </div>
</template>

<script>
  import Child from './components/Child' // 導入子組件

  export default {
    name: 'App',
    components: {Child}, // 註冊子組件
    data() {
      return {
        title: '父組件向我傳遞了信息'
      }
    }
  }
</script>

以下是子組件

<template>
  <div id="app">
    {{message}}
  </div>
</template>

<script>
  export default {
    props: ['message'] // 使用props傳遞數據
  }
</script>

<!--more-->

2.子組件對父組件通訊

子組件對父組件通訊咱們只能經過 自定義事件去進行觸發，而沒法像 父對子通訊那樣直接進行數據傳遞

首先咱們必須瞭解Vue暴露兩個實例方法

• vm.$emit( event, […args] )，觸發當前實例上的事件，附加參數都會傳給監聽器回調
• vm.$on( event, callback )，監聽當前實例上的自定義事件，事件能夠由vm.$emit觸發，回調函數會接收全部傳入事件觸發函數的額外參數

總結一下：咱們用$on去監聽一個**自定義事件**，這個自定義事件由$emit觸發，觸發的同時將data放在附加參數裏，傳給$on接收

以下是父組件

<template>
  <div id="app">
    <child v-on:receiveData="consoleData"/>
    <!--監聽自定義事件receiveData，監聽到以後觸發consoleData獲取子組件傳遞的數據-->
  </div>
</template>

<script>
  import Child from './components/Child' // 導入子組件

  export default {
    name: 'App',
    components: {Child}, // 註冊子組件
    methods: {
      consoleData(data) {
        // 這裏的參數是由$emit傳遞來的數據
        console.log(data) // ["子組件向我傳遞信息啦", "測試"]
      }
    }
  }
</script>

以下是子組件

<template>
  <div id="app">
    <button @click="transData">點我，向父組件傳遞數據</button>
    <!--綁定transData事件，以便執行器內部的$emit-->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: '子組件向我傳遞信息啦',
        title: '測試'
      }
    },
    methods: {
      transData() {
        // 觸發自定義事件receiveData，將數據傳遞給父組件
        this.$emit('receiveData', [this.message, this.title])
      }
    }
  }
</script>

3.兄弟組件之間進行通訊

主要咱們經過全局註冊一個 eventBus單文件組件，這個組件的做用充當着 vm.$emit( event, […args] )裏的 vm，其它形式與第二小節相似，不做過多說明了

新建一個js文件，做爲EventBus

import Vue from 'vue' // 導入vue模塊

export default new Vue({}) // 新建一個空的vue實例做爲EventBus

以下是父組件

<template>
  <div id="app">
    <!--兩個子組件-->
    <child1/>
    <child2/>
  </div>
</template>

<script>
  import Child1 from './components/Child' // 導入子組件1
  import Child2 from './components/child2' // 導入子組件2

  export default {
    name: 'App',
    components: {Child1, Child2}// 註冊兩個子組件
  }
</script>

以下是子組件1

<template>
  <div>
    <button @click="transData">點我，向兄弟組件Child2傳遞數據</button>
    <!--綁定transData事件，以便執行器內部的$emit-->
  </div>
</template>

<script>
  import eventBus from './EventBus' // 導入EventBus

  export default {
    data() {
      return {
        message: 'Child2，你好呀',
        title: '測試'
      }
    },
    methods: {
      transData() {
        // 經過EventBus觸發自定義事件receiveData，將數據傳遞給Child2組件
        eventBus.$emit('receiveData', [this.message, this.title])
      }
    }
  }
</script>

以下是子組件2

<template>
  <div>
    <h1>個人兄弟組件Child1向我傳遞了信息：{{message}}</h1>
    <!--綁定transData事件，以便執行器內部的$emit-->
  </div>
</template>

<script>
  import eventBus from './EventBus' // 導入EventBus

  export default {
    data() {
      return {
        message: ''
      }
    },
    created() {
      eventBus.$on('receiveData', data => {
        // 注意這裏使用箭頭函數是由於須要將this綁定父級的context，不然this指向eventBus
        this.message = data
      })
    }
  }
</script>