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

本篇文章是全部采用的<script setup>這種組合式API寫法，相對于選項式來說，組合式API這種寫法更加自由，具體可以參考Vue文檔對兩種方式的描述。

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

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

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

開始搞事情~

舉一個栗子

俗話說的好，學習不寫demo，那就是耍流氓~

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

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

1、Props方式

Props方式是Vue中最常見的一種父傳子的一種方式，使用也比較簡單?！?/p>