Vue框架中子組件向父組件通信方法淺析

李時穎

摘 要：Vue框架是目前在前端開發(fā)領(lǐng)域常用的框架技術(shù)，Vue框架技術(shù)提出組件化開發(fā)的概念。組件就是將網(wǎng)頁的html、css、JavaScript三個模塊封裝成為一個.vue的文件，統(tǒng)一由vue實例對象進行管理，最終渲染成完整的網(wǎng)頁。

關(guān)鍵詞：Vue框架；組件；組件通信

Vue作為一套用于構(gòu)建用戶界面的漸進式框架，現(xiàn)階段在前端開發(fā)領(lǐng)域獲得了廣泛的應(yīng)用。Vue框架在設(shè)計時借鑒了Angular框架技術(shù)的模板和數(shù)據(jù)綁定技術(shù)，以及React框架的組件化和虛擬DOM概念。Vue框架被設(shè)計為可以自底向上的逐層應(yīng)用。在使用Vue框架時，只關(guān)注視圖層，主要目標是通過API實現(xiàn)數(shù)據(jù)綁定和組合視圖組件，即實現(xiàn)“數(shù)據(jù)驅(qū)動視圖”的工作原理。Vue的數(shù)據(jù)驅(qū)動是通過MVVM即（Model-View-ViewModel）模式來實現(xiàn)的。

在Vue框架中，使用了“組件”的相關(guān)概念。組件（Component）是Vue框架中最強大的功能之一。通過開發(fā)組件可以對可復(fù)用的代碼進行封裝，并將封裝好的代碼注冊成標簽，實現(xiàn)擴展HTML元素的功能。組件的出現(xiàn)，能夠以不同的組件來劃分不同的功能模塊，通過調(diào)用對應(yīng)的組件即可實現(xiàn)相對應(yīng)的功能。

Vue框架中的數(shù)據(jù)流動，如果是在組件內(nèi)，一般可以通過數(shù)據(jù)綁定的方式實現(xiàn)；如果數(shù)據(jù)流動發(fā)生在兩個組件之間，則需要通過組件通信來完成。

本文旨在通過一個具體的案例，探討子組件的數(shù)據(jù)向父組件傳遞的過程。

一、案例介紹及數(shù)據(jù)傳輸情況

本案例是個體育選課單頁面應(yīng)用前端展示部分，其中，三個教師選項卡是父組件，三個教師選項卡中的點擊預(yù)約按鈕是子組件。如上圖片1所示。當點擊了某位老師選項卡中的點擊預(yù)約按鈕，該教師選項卡的背景色就會變成紅色，同時預(yù)約情況中/后的數(shù)字會+1，如下圖2所示。

圖2中顯示的交互效果事實上是由組件通信完成的，基本原理是子組件被點擊后向父組件發(fā)送了一個類名，父組件收到該類名后，為該類名設(shè)置的樣式就將生效，同時在組件配置項methods中將預(yù)約人數(shù)+1。

二、由子組件向父組件通信實現(xiàn)數(shù)據(jù)傳輸?shù)倪^程

子組件向父組件通信可以通過三步來實現(xiàn)：

（一）在觸發(fā)傳輸行為的子組件標簽上綁定事件（事件函數(shù)）并將數(shù)據(jù)作為參數(shù)傳入

（二）在父組件中使用的子組件標簽上，以“@函數(shù)1（發(fā)快遞）=函數(shù)2（收快遞）”的格式通過使用自定義事件“函數(shù)1”監(jiān)聽子組件觸發(fā)的事件。其中自定義事件“函數(shù)1”配置在子組件的methods配置項中，“函數(shù)2”配置在父組件的methods配置項中。

（三）在子組件的事件函數(shù)中調(diào)用$emit方法（函數(shù)1，[參數(shù)）]）觸發(fā)組件通信完成。當$emit方法被調(diào)用，數(shù)據(jù)就從子組件被傳輸?shù)礁附M件中。

上述過程中，$emit方法是一個由Vue實例創(chuàng)建的事件對象，語法格式為： this.$emit（event，[...args]）， 其中this是指向Vue實例的當前組件的引用。event代表所要觸發(fā)的事件名稱。args 是可選參數(shù)對象，可以在觸發(fā)事件時通過event的回調(diào)函數(shù)傳遞。

如果我們以生活中一個大家非常熟悉的場景來描述這個過程，我們可以把通信過程下

理解成三個步驟：

①打包快遞

②聯(lián)系收件人，確認信息

③聯(lián)系快遞公司，填寫快遞單，快遞公司進行發(fā)貨派送

這三個步驟與剛才組件通信的過程的關(guān)系可以用圖3表示。

三、組件通信在案例中的實現(xiàn)

為了直觀的展示代碼的運行過程，我們在實現(xiàn)關(guān)鍵步驟的代碼處通過alert語句輸出當前程序運行的狀態(tài)，如下圖4、圖5、圖6所示：

如圖4所示，我們通過代碼：

在子組件input標簽上綁定了一個單擊事件click來觸發(fā)數(shù)據(jù)傳輸?shù)倪^程，并將要傳輸?shù)臄?shù)據(jù)——類名“choose”作為參數(shù)放置在click事件函數(shù)中。

當我們點擊按鈕，數(shù)據(jù)傳輸過程就被觸發(fā)，相當于實現(xiàn)了快遞被打包的過程。

如圖5所示，通過代碼：

const display1= Vue.extend（{

template：`

課程教師：{{name}}

主帶課程：{{subject}}

預(yù)約情況：{{sum+'/'+num}}

我們在子組件標簽book1中，配置一個自定義事件：@fakuadi="shoukuadi"，并將自定義事件中的“函數(shù)2”配置在父組件的methods中，定義數(shù)據(jù)收到之后的行為。

methods：{

shoukuadi（value）{

this.classname=value;

this.num++;

alert（'與收件人確認好信息，準備發(fā)快遞'）

}

這個過程相當于完成了“與收件人確認好信息，準備發(fā)快遞”的步驟。

}

}

}）

如圖6所示，通過代碼：

const book1=Vue.extend（{

template：`#book`，

methods：{

dabaokuadi（value）{

alert（'單擊后觸發(fā)dabaokuadi，此時數(shù)據(jù)以參數(shù)的形式被打包完畢'）

this.$emit（'fakuadi'，value）

alert（'通過快遞公司順利發(fā)出快遞并派送'） }} }）

我們在子組件實例對象的methods配置項中，通過調(diào)用emit方法this.$emit（'fakuadi'，value）將函數(shù)1（子組件標簽中定義的自定義事件函數(shù)）配置在方法中。實現(xiàn)了數(shù)據(jù)傳輸?shù)牟襟E3“通過快遞公司順利發(fā)出快遞并派送”。

通過上述步驟，我們將完成數(shù)據(jù)從子組件向父組件通信的過程并最終實現(xiàn)圖片2的案例效果。

參考文獻：

[1]師曉利 劉志遠 .Vue.js前端開發(fā)實戰(zhàn)[M].北京.中國工信出版集團.人民郵電出版社.2022.P112-P125。