Vue 基礎篇(一)：Vue組件間通訊

本博客主要是介紹各類情景下的Vue組件間的通訊

1、父組件向子組件通訊

一、使用props

使用props，父組件可使用props向子組件傳遞數據。

<div id="demo1">
    <children-div-1 v-bind:parent-message="message"></children-div-1>
</div>

Vue.component("children-div-1",{
    props:["parentMessage"],
    template : `
        <div>
            <p>{{ parentMessage }}</p>
        </div>
    `
});
new Vue({
    el : "#demo1",
    data : {
        message : "這裏是來自父組件的消息"
    }
});
複製代碼

二、使用$children(不推薦)

$children返回組件的一個子組件集合

<div id="demo2">
    <p @click="changeMessage">點擊改變子組件的消息</p>
    <children-div-2></children-div-2>
</div>

var childrenDiv2 = {
    template : `
        <div>
            <p>{{ message }}</p>
        </div>
    `,
    data : function(){
        return {message : "這裏是子組件消息"}
    }
}
new Vue({
    el : "#demo2",
    components : {
        "children-div-2" : childrenDiv2
    },
    methods : {
        changeMessage : function(){
            this.$children[0].message = "父組件改變了子組件的消息";
        }
    }
});
複製代碼

2、子組件向父組件通訊

一、使用vue事件

父組件向子組件傳遞事件方法，子組件經過$emit觸發事件，回調給父組件。

<div id="demo3">
    <children-div-3 v-on:change-message="changeMessage"></children-div-3>
    <p>{{ message }}</p>
</div>

Vue.component("children-div-3",{
    template : `
        <div>
            <p @click="$emit('change-message','子組件要求改變消息')">點擊改變父組件的消息</p>
        </div>
    `
});
new Vue({
    el : "#demo3",
    data : {
        message : "這裏是父組件的消息"
    },
    methods : {
        changeMessage : function(data){
            this.message = data;
        }
    }
});
複製代碼

二、使用$parent(不推薦)

$parent返回組件的父組件

<div id="demo4">
    <children-div-4></children-div-4>
    <p>{{ message }}</p>
</div>

Vue.component("children-div-4",{
    template : `
        <div>
            <p @click="changeMessage">點擊改變父組件的消息</p>
        </div>
    `,
    methods : {
        changeMessage : function(){
            this.$parent.message = "子組件要求改變消息";
        }
    }
});
new Vue({
    el : "#demo4",
    data : {
        message : "這裏是父組件的消息"
    }
});
複製代碼

3、多層級父子組件通訊

一、使用inheritAttrs + $attrs + $listenerst

inheritAttrs：默認值爲true，設置爲false時，沒有被子組件繼承的父組件屬性（子組件的屬性定義在組件的props中），不會當作特性展現在子組件根元素上面。

默認狀況下父做用域的不被認做props的特性綁定(attribute bindings)將會「回退」且做爲普通的HTML特性應用在子組件的根元素上。  
當撰寫包裹一個目標元素或另外一個組件的組件時，這可能不會老是符合預期行爲。  
經過設置 inheritAttrs 到 false，這些默認行爲將會被去掉。
而經過 (一樣是 2.4 新增的) 實例屬性 $attrs 可讓這些特性生效，且能夠經過 v-bind 顯性的綁定到非根元素上。
複製代碼

$attrs：存放沒有被子組件繼承的的數據對象

包含了父做用域中不被認爲 (且不預期爲) props 的特性綁定 (class 和 style 除外)。
當一個組件沒有聲明任何 props 時，這裏會包含全部父做用域的綁定 (class 和 style 除外)，
而且能夠經過 v-bind=」$attrs」 傳入內部組件——在建立更高層次的組件時很是有用。
複製代碼

$listeners：含了做用在這個組件上的全部監聽器

包含了父做用域中的 (不含 .native 修飾器的) v-on 事件監聽器。
它能夠經過 v-on=」$listeners」 傳入內部組件——在建立更高層次的組件時很是有用.
複製代碼

父組件中未被props(v-on)綁定的屬性(事件) 能夠在子組件中，經過 $attrs， $listeners 獲取。

<div id="demo6">
    <p>{{ message }}</p>
    <!-- 向後代組件傳遞消息而且綁定時間監聽 -->
    <children-div-6
        v-bind:son-message="sonMessage"
        v-bind:grandson-message="grandsonMessage"
        v-on:change="change"
    ></children-div-6>
</div>

var grandSonDiv = {
    props : ["grandsonMessage"],
    template : `
        <div>
            <p @click="$emit('change','這裏是來自後代組件的消息')">{{ grandsonMessage }}</p>
        </div>
    `,
}
var childrenDiv ={
    props : ["sonMessage"],
    // inheritAttrs設置爲false，子組件只獲取props中定義屬性所接送的消息，其他的都不繼承，保存在$attrs中
    // $attrs 獲取沒有被子組件繼承的數據對象，傳遞給後代組件
    // v-on="$listeners" 包含了全部的監聽器，因此將後代組件觸發的事件通報給父組件
    template : `
        <div>
            <p>{{ sonMessage }}</p>
            <grandson-div v-bind=$attrs v-on="$listeners"></grandson-div>
        </div>
    `,
    inheritAttrs : false,
    components : {
        "grandson-div" : grandSonDiv
    }
};
new Vue({
    el : "#demo6",
    data : {
        message : "這裏是父組件本身的消息",
        sonMessage : "這是給子組件的消息",
        grandsonMessage : "這是給後代組件的消息"
    },
    components : {
        "children-div-6" : childrenDiv
    },
    methods : {
        change : function(val){
            this.message = val;
        }
    }
})
複製代碼

4、任意兩個組件之間的數據傳遞

一、使用VueX

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，

Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新。

二、建立一個事件中心進行全局傳遞與接受事件

建立一個事件中心Hub，至關於中轉站，能夠用它來進行全局傳遞事件和接收事件。

<div id="demo5">
    <one-div></one-div>
    <other-div></other-div>
</div>

var Hub = new Vue(); //建立事件中心,注意Hub要放在全局

Vue.component("one-div",{
    template : `
        <div>
            <p @click="sendMessage">向另一個組件發送消息</p>
        </div>
    `,
    methods : {
        sendMessage : function(){
            Hub.$emit("change","我是來自另一個組件的消息");
        }
    }
})
Vue.component("other-div",{
    template : `
        <div>
            <p>{{ message }}</p>
        </div>
    `,
    data : function(){
        return {message : "這裏顯示的我本身組件的消息"}
    },
    created(){
        Hub.$on("change",(val) =>{
            this.message = val;
        })
    }
})
new Vue({
    el : "#demo5"
})
複製代碼