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

李時穎

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

關鍵詞：Vue框架；組件；組件通信

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

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

Vue框架中的數據流動，如果是在組件內，一般可以通過數據綁定的方式實現；如果數據流動發生在兩個組件之間，則需要通過組件通信來完成。

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

一、案例介紹及數據傳輸情況

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

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

二、由子組件向父組件通信實現數據傳輸的過程

子組件向父組件通信可以通過三步來實現：

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

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

（三）在子組件的事件函數中調用$emit方法（函數1，[參數）]）觸發組件通信完成。當$emit方法被調用，數據就從子組件被傳輸到父組件中。

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

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

理解成三個步驟：

①打包快遞

②聯系收件人，確認信息

③聯系快遞公司，填寫快遞單，快遞公司進行發貨派送

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

三、組件通信在案例中的實現

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

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

在子組件input標簽上綁定了一個單擊事件click來觸發數據傳輸的過程，并將要傳輸的數據——類名“choose”作為參數放置在click事件函數中。

當我們點擊按鈕，數據傳輸過程就被觸發，相當于實現了快遞被打包的過程。

如圖5所示，通過代碼：

const display1= Vue.extend（{

template：`

課程教師：{{name}}

主帶課程：{{subject}}

預約情況：{{sum+'/'+num}}

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

methods：{

shoukuadi（value）{

this.classname=value;

this.num++;

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

}

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

}

}

}）

如圖6所示，通過代碼：

const book1=Vue.extend（{

template：`#book`，

methods：{

dabaokuadi（value）{

alert（'單擊后觸發dabaokuadi，此時數據以參數的形式被打包完畢'）

this.$emit（'fakuadi'，value）

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

我們在子組件實例對象的methods配置項中，通過調用emit方法this.$emit（'fakuadi'，value）將函數1（子組件標簽中定義的自定義事件函數）配置在方法中。實現了數據傳輸的步驟3“通過快遞公司順利發出快遞并派送”。

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

參考文獻：

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