vue — 組件間通訊

vue中組件熟練使用很是重要，組件間通訊的方式主要包括：父——》子；子——》父；非父子之間通訊。

組件間的關係

將組件組合在一塊兒，多數場景是父子關係：組件 A 能夠在本身的模板中使用組件 B。這就必然的須要彼此相互通訊：父組件可能會向下傳遞數組給子組件，而後子組件也可能會將自身發生的變化通知到父組件。然而，重要的是，爲了儘量將父子組件解耦，須要有一個定義清晰的接口。定義清晰的通訊方式，能夠確保組件能夠相對隔離地組織代碼，以及合乎邏輯易於推斷，從而使它們更加易於維護，而且可能更加易於複用。

在 Vue 中，父子組件之間的關係能夠概述爲：props 向下，events 向上。父組件經過 props 向下傳遞數據給子組件，子組件經過 events 發送消息給父組件。

父——》子

父組件向子組件傳遞數據經過Props

每一個組件實例都有本身的孤立做用域。不能直接在子組件模板中引用父組件數據。要想在子組件模板中引用父組件數據，可使用props將數據向下傳遞至子組件。
例如：

父組件：

<parent>
    <child v-bind="child-msg"></child>//這裏必需要用 - 代替駝峯
</parent>

data(){
    return {
        msg: [1,2,3]
    };
}

子組件經過props來接收數據：

方式1：

props: ['childMsg']

方式2：

props: {
    childMsg: Array //這樣能夠指定傳入的類型，若是類型不對，會警告
}

方式3

props: {
    childMsg: {
        type: Array,
        default: [0,0,0] //這樣能夠指定默認的值
    }
}

這樣，就實現了父組件向子組件傳遞數據。
注意：子組件接收到的數據，不要修改，官方定義的props是單向綁定。若是須要修改，能夠將接收到的值賦給data裏面的一個變量，這樣，就不會形成父組件裏面的數據被篡改。
總結下：

總結下：

父組件中import子組件，並註冊
父組件調用子組件，並綁定須要傳值的屬性值
子組件zhong

子——》父

子組件向父組件傳遞數據經過$on和$emit
子組件是經過點擊事件去傳遞參數的。

vm.$emit( event, […args] ) 觸發當前實例上的事件，附加參數會傳給監聽器回調。

在子組件中添加一個click事件，該事件經過this.$emit將方法或屬性傳遞給父組件，其中第一個參數表示會觸發父組件上的方法，後面的參數爲向父組件傳遞的數據。

子組件:
<template>
    <div @click="up"></div>
</template>

methods: {
    up() {
        this.$emit('upup','hehe'); //主動觸發upup方法，'hehe'爲向父組件傳遞的數據
    }
}

父組件中就能夠監聽子組件傳過來的屬性。
父組件經過監聽upup方法，能夠獲取子組件傳遞的數據。下面例子中，change方法裏面的參數表示的就是從子組件傳遞過來的數據。

父組件：
<div>
    <child @upup="change" :msg="msg"></child> //監聽子組件觸發的upup事件,而後調用change方法
</div>
methods: {
    change(msg) {
        this.msg = msg;
    }
}

總結下：
子組件須要以某種方式例如點擊事件的方法來觸發一個自定義事件
將須要傳的值做爲$emit的第二個參數，該值做爲實參傳給響應自定義事件的方法
在父組件中註冊子組件並在子組件標籤上綁定對自定義事件的監聽

在通訊中，不管是子組件向父組件傳值仍是父組件向子組件傳值，他們都有一個共同點就是有中間介質，子向父的介質是自定義事件，父向子的介質是props中的屬性。

非父子組件通訊

非父子組件之間須要經過中央事件總線做爲橋樑，來實現通訊。
eventBus中只建立了一個新的Vue實例，之後它就承擔起了組件之間通訊的橋樑了，也就是中央事件總線，至關於中轉站，用它來傳遞事件和接收事件。
例如：

1. 建立中央事件總線

   import Vue from 'vue';
   export default new Vue;

2. 組件1觸發

   import bus from "../eventBus.js"; //引入中央事件總線
   <div @click="eve"></div>
   methods: {
       eve() {
           bus.$emit('change','hehe'); //bus觸發事件
       }
   }

   咱們在響應點擊事件的eve函數中用$emit觸發了一個自定義的change事件，並傳遞了一個字符串參數
   PS:$emit實例方法觸發當前實例(這裏的當前實例就是bus)上的事件,附加參數都會傳給監聽器回調。

3. 組件2接收:

   import bus from "../eventBus.js"; //引入中央事件總線
   <div></div>
   mounted() {
       bus.$on('change', () => { //Hub接收事件
           this.msg = 'hehe';
       });
   }

   咱們在mounted中，監聽了change,並把傳遞過來的字符串參數傳遞給了$on監聽器的回調函數
   PS:
   mounted:是一個Vue生命週期中的鉤子函數，簡單點說就相似於jquery的ready，Vue會在文檔加載完畢後調 用mounted函數。
   $on:監聽當前實例上的自定義事件(此處當前實例爲bus)。事件能夠由$emit觸發，回調函數會接收全部傳入事件觸發函數($emit)的額外參數。

總結下：
一、 建立一箇中央事件總線，例如eventBus，用它做爲通訊橋樑
二、在須要傳值的組件中用bus.$emit觸發一個自定義事件，並傳遞參數
三、在須要接收數據的組件中庸bus.$on監聽自定義事件，並在回調函數中處理傳遞過來的參數。

對於更復雜的組件狀態管理，vue提供了vuex（狀態管理模式）來進行處理。