新聞中心
寫在前面
我們會講以下七種組件通信方式:

成都網(wǎng)站建設(shè)哪家好,找創(chuàng)新互聯(lián)建站!專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)公司、微信開發(fā)、微信小程序、集團企業(yè)網(wǎng)站設(shè)計等服務(wù)項目。核心團隊均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗,服務(wù)眾多知名企業(yè)客戶;涵蓋的客戶類型包括:食品包裝袋等眾多領(lǐng)域,積累了大量豐富的經(jīng)驗,同時也獲得了客戶的一致贊譽!
- props
- emit
- v-model
- refs
- provide/inject
- eventBus
- vuex/pinia
舉個例子
本文將使用如下演示,如下圖所示:
上圖中,列表和輸入框分別是父組件和子組件。根據(jù)不同的通信方式,會調(diào)整父子組件。
1、Props
props 是 Vue 中最常見的父子通信方式,使用起來也比較簡單。
根據(jù)上面的demo,我們在父組件中定義了數(shù)據(jù)和對數(shù)據(jù)的操作,子組件只渲染一個列表。
父組件代碼如下:
v-model="value"
type="text"
class="form-control"
placeholder="Please enter"
/>
子組件只需要渲染父組件傳遞的值。
代碼如下:
- {{ i }}
2、Emit
Emit也是Vue中最常見的組件通信方式,用于子組件向父組件傳遞消息。
我們在父組件中定義列表,子組件只需要傳遞添加的值。
子組件代碼如下:
v-model="value"
type="text"
class="form-control"
placeholder="Please enter"
/>
點擊子組件中的【添加】按鈕后,我們會發(fā)出一個自定義事件,并將添加的值作為參數(shù)傳遞給父組件。
父組件代碼如下:
- {{ i }}
在父組件中,只需要監(jiān)聽子組件的自定義事件,然后執(zhí)行相應(yīng)的添加邏輯即可。
3、v-model
v-model 是 Vue 中一個優(yōu)秀的語法糖,比如下面的代碼。
這是以下代碼的簡寫形式
這確實容易了很多?,F(xiàn)在我們將使用 v-model 來實現(xiàn)上面的示例。
子組件
v-model="value"
type="text"
class="form-control"
placeholder="Please enter"
/>
在子組件中,我們先定義props和emits,添加完成后再發(fā)出指定的事件。
注意:update:*是Vue中固定的寫法,*代表props中的一個屬性名。
在父組件中使用比較簡單,代碼如下:
- {{ i }}
4、Refs
使用API選項時,我們可以通過this.$refs.name獲取指定的元素或組件,但在組合API中不行。如果我們想通過ref獲取,需要定義一個同名的Ref對象,在組件掛載后可以訪問。
示例代碼如下:
{{ i }}
v-model="value"
type="text"
class="form-control"
placeholder="Please enter"
/>
子組件
- {{ i }}
注意:使用 provide 進行數(shù)據(jù)傳輸時,盡量使用 readonly 封裝數(shù)據(jù),避免子組件修改父組件傳遞的數(shù)據(jù)。
6、eventBus
Vue 3 中移除了 eventBus,但可以借助第三方工具來完成。Vue 官方推薦使用 mitt 或 tiny-emitter。
在大多數(shù)情況下,不建議使用全局事件總線來實現(xiàn)組件通信。雖然比較簡單粗暴,但是維護事件總線從長遠來看是個大問題,這里就不解釋了。有關(guān)詳細信息,您可以閱讀特定工具的文檔。
7、vuex/pinia
Vuex 和 Pinia 是 Vue 3 中的狀態(tài)管理工具,使用這兩個工具可以輕松實現(xiàn)組件通信。由于這兩個工具都比較強大,這里就不一一展示了。有關(guān)詳細信息,請參閱文檔。
網(wǎng)站標(biāo)題:七個Vue3中的組件通信方式
文章轉(zhuǎn)載:http://m.5511xx.com/article/codghcs.html


咨詢
建站咨詢
