組件（Component）是 Vue 最核心的功能，是可復(fù)用的vue實(shí)例；但組件實(shí)例的作用域是相互獨(dú)立的，也就是說(shuō)不同組件間的數(shù)據(jù)是無(wú)法直接互相引用的。那么，如何將組件間的數(shù)據(jù)關(guān)聯(lián)起來(lái)？如何進(jìn)行通信傳遞數(shù)據(jù)呢？下面本篇文章就給大家分享七種組件通信方式，希望對(duì)大家有所幫助！

本篇文章是全部采用的<script setup>這種組合式API寫(xiě)法，相對(duì)于選項(xiàng)式來(lái)說(shuō)，組合式API這種寫(xiě)法更加自由，具體可以參考Vue文檔對(duì)兩種方式的描述。

注：php中文網(wǎng)線上班也開(kāi)始教授最新版本的vue課程了，感興趣的朋友可以了解學(xué)習(xí)。

本篇文章將介紹如下七種組件通信方式：

• props
• emit
• v-model
• refs
• provide/inject
• eventBus
• vuex/pinia(狀態(tài)管理工具)

開(kāi)始搞事情~

舉一個(gè)栗子

俗話說(shuō)的好，學(xué)習(xí)不寫(xiě)demo，那就是耍流氓~

本篇文章將圍繞下面這個(gè)demo，如下圖所示：

上圖中，列表和輸入框分別是父子組件，根據(jù)不同傳值方式，可能誰(shuí)是父組件誰(shuí)是子組件會(huì)有所調(diào)整。

1、Props方式

Props方式是Vue中最常見(jiàn)的一種父?jìng)髯?/strong>的一種方式，使用也比較簡(jiǎn)單?！?/p>