父組件、子組件傳值

1. 前言

在前面小節(jié)中，我們學(xué)習(xí)了系統(tǒng)預(yù)設(shè)組件的使用、自定義組件的創(chuàng)建與使用，日常開發(fā)過程中，經(jīng)常會(huì)有組件之間互相傳值的需求。這一小節(jié)我們來(lái)了解一下如何在組件與組件之間傳值。

為了方便描述，我們將組件分為了父組件與子組件，那如何區(qū)分哪個(gè)是父組件，哪個(gè)是子組件呢？

2. 區(qū)分父組件、子組件

父組件、子組件是一對(duì)相對(duì)的名詞，只是為了來(lái)更方便的區(qū)分組件，一個(gè)組件既可以是父組件，也可以是子組件。

比如某個(gè)頁(yè)面組件A引入一個(gè)自定義組件B，其中這個(gè)頁(yè)面組件A就是父組件，引入的這個(gè)自定義組件B就是子組件。

如果這個(gè)自定義組件B中還引入了另外一個(gè)自定義組件C，那么自定義組件B就是自定義組件C的父組件，自定義組件C就是自定義組件B的子組件。

可能文字不太好理解，下面我們來(lái)舉個(gè)實(shí)際開發(fā)中的例子。

上一小節(jié)我們創(chuàng)建了一個(gè)自定義登錄彈窗組件 login.vue，并在首頁(yè) index.vue 文件中引用了這個(gè)組件。其中index.vue 就是父組件，而被引用的登錄彈窗組件 login.vue 就是子組件。

3. 父組件向子組件傳值

如果想要將父組件的變量顯示在子組件上面，就需要父組件 index.vue 向子組件 login.vue 傳值，來(lái)控制彈窗內(nèi)容的顯示，接下里我們來(lái)看看具體怎樣操作。

大致的思路就是：在父組件中隨便定義一個(gè) data 變量，然后在組件標(biāo)簽中傳遞這個(gè)變量給子組件，最后在子組件中通過 props 方法來(lái)接受父組件傳遞過來(lái)的值。我們來(lái)繼續(xù)修改上一小節(jié)的代碼。

3.1 父組件添加 data 變量

在 pages/index/index.vue 文件中的添加一個(gè) data 變量。
實(shí)例：

data() {
    return {
        text:"我是父組件的值"
    };
}

3.2 使用 login 組件的時(shí)候傳遞值

繼續(xù)修改 pages/index/index.vue 文件，在使用組件時(shí)，添加我們要傳遞的值。
實(shí)例：

<!-- 原代碼 -->
<Login></Login>

<!-- 修改后 -->
<Login :text="text"></Login>

3.3 在子組件中接收值

這次來(lái)修改 components/login/login.vue 文件，使用 props 來(lái)接受父組件傳遞過來(lái)的值。
實(shí)例：

<script>
    export default {
        props:['text']
    }
</script>

3.4 頁(yè)面顯示值

繼續(xù)編輯 components/login/login.vue 文件，在 template 頁(yè)面代碼中顯示 text 值。
實(shí)例：

<!-- 原代碼 -->
<p>慕課網(wǎng)wiki</p>

<!-- 修改后 -->
<p>{{text}}</p>

3.5 查看效果

點(diǎn)擊工具欄–運(yùn)行–運(yùn)行到內(nèi)置瀏覽器，會(huì)出現(xiàn)以下效果：

4. 子組件向父組件傳值

在前面的課程中，我們只是實(shí)現(xiàn)了在頁(yè)面中顯示登錄彈窗組件，但是點(diǎn)擊登錄按鈕彈窗并不會(huì)被隱藏，這樣一般不符合實(shí)際需求。

如果想要點(diǎn)擊授權(quán)登錄按鈕后，隱藏登錄彈框這個(gè)組件。這就需要通過 $emit 觸發(fā)事件進(jìn)行參數(shù)的傳遞。將代表子組件中授權(quán)登錄按鈕狀態(tài)的變量 isShow 傳遞給父組件。

4.1 在父組件中添加控制彈窗顯示的變量

編輯 pages/index/index.vue 文件。

4.1.1 在 data 中添加 isShow 變量

我們定義 isShow 變量，代表子組件中授權(quán)登錄按鈕狀態(tài)，當(dāng) isShow 為 true 時(shí)，顯示登錄彈窗組件，當(dāng)isShow 為 false 時(shí)，隱藏登錄彈窗組件。

data() {
    return {
        text:"我是父組件的值",
        isShow:true
    };
}

4.1.2 v-if 控制組件顯示

<!-- 原代碼 -->
<Login :text="text"></Login>

<!-- 修改后 -->
<Login v-if="isShow" :text="text"></Login>

4.2 在子組件中通過 $emit 觸發(fā)事件向父組件傳值

編輯 components/login/login.vue 文件。

4.2.1 給授權(quán)登錄按鈕添加一個(gè)點(diǎn)擊事件

<button @click="sendMsg">授權(quán)登錄</button>

4.2.2 創(chuàng)建點(diǎn)擊事件，并向父組件傳值

當(dāng)點(diǎn)擊授權(quán)登錄按鈕后，觸發(fā) sendMsg() 事件，像父組件傳遞isShow對(duì)象，以及參數(shù)false。如果想要傳遞多個(gè)參數(shù)，后面跟一個(gè)數(shù)組就可以了。

methods:{
    sendMsg () {
        this.$emit('isShow',false)
        //傳遞多個(gè)參數(shù)
        //this.$emit('isShow',[false,"你好"])
    }
}

4.3 父組件接收參數(shù)

回到父組件，編輯 pages/index/index.vue 文件。

4.3.1 指定接收事件

在 Login 標(biāo)簽上面接收從子組件傳遞過來(lái)的事件 isShow，不要忘記 isShow 前面有@符號(hào)。并指定接收事件為 getShow。

<Login v-if="isShow" :text="text" @isShow="getShow"></Login>

4.3.2 自定義事件并打印參數(shù)

下面我們會(huì)繼續(xù)創(chuàng)建 getShow 事件，打印出從子組件傳遞過來(lái)的參數(shù)，并將isShow 變量賦值為子組件傳過來(lái)的 false 值。

methods:{
    getShow(res){
        console.log("從子組件傳遞過來(lái)的值",res)
        this.isShow = res
    }
}

4.4 查看效果

點(diǎn)擊工具欄–運(yùn)行–運(yùn)行到內(nèi)置瀏覽器，點(diǎn)擊授權(quán)登錄按鈕后，登錄彈窗會(huì)被隱藏，并且終端會(huì)打印信息：

從子組件傳遞過來(lái)的值 false

5. 小結(jié)

本節(jié)課程我們主要學(xué)習(xí)了父組件和子組件之間的參數(shù)傳遞，本節(jié)課程的重點(diǎn)如下：

• 掌握父組件向子組件傳遞參數(shù)的流程，在父組件中使用組件的時(shí)候傳遞值，并在子組件中用props接收值；
• 掌握子組件向父組件傳遞參數(shù)的流程，比較復(fù)雜，建議跟著課程敲寫代碼，加深一下理解。