最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

寫在前面

本文采用

子組件只需要渲染父組件傳過來的值即可。

代碼如下：

2. emit

Emit也是Vue中最常見的組件通信方式，用于子組件向父組件傳遞消息。

我們?cè)诟附M件中定義列表，子組件只需要傳遞添加的值即可。

子組件代碼如下：

單擊子組件中的 [Add] 按鈕后，我們發(fā)出自定義事件并將添加的值作為參數(shù)傳遞給父組件。

父組件代碼如下：

在父組件中，只需要監(jiān)聽子組件的自定義事件，然后執(zhí)行相應(yīng)的添加邏輯即可。

3.v-model

v-model是Vue中一個(gè)優(yōu)秀的語法糖，比如下面的代碼。

這是以下代碼的簡(jiǎn)寫形式

確實(shí)容易多了?，F(xiàn)在我們將使用 v-model 來實(shí)現(xiàn)上面的例子。

子組件

在子組件中，我們先定義props和emit，添加完成后，再emit指定的事件。

注意：update:*是Vue中固定的寫法，*代表props中的一個(gè)屬性名。

在父組件中使用比較簡(jiǎn)單，代碼如下：

4. refs

在使用option API時(shí)，我們可以通過this.$refs.name獲取指定的元素或組件，而在combined API中則不行。如果我們想通過ref獲取，需要定義一個(gè)同名的Ref對(duì)象，組件掛載后才能訪問到。

示例代碼如下：

子組件代碼如下：

注意：默認(rèn)情況下，setup組件是關(guān)閉的，通過template ref獲取組件的public實(shí)例。如果需要暴露，需要通過defineExpose API暴露。

5. provide/inject

Provide 和 inject 是 Vue 中提供的一對(duì) API。無論層次有多深，API都能實(shí)現(xiàn)父組件到子組件的數(shù)據(jù)傳遞。

示例代碼如下所示：

父組件

子組件

注意：使用provide進(jìn)行數(shù)據(jù)傳遞時(shí)，盡量用readonly封裝數(shù)據(jù)，避免子組件修改父組件傳過來的數(shù)據(jù)。

6.eventBus

在 Vue 3 中移除了 eventBus，但可以借助第三方工具來完成。Vue 官方推薦 mitt 或 tiny-emitter。大多數(shù)情況下，不推薦使用全局事件總線來實(shí)現(xiàn)組件通信。雖然比較簡(jiǎn)單粗暴，但是長(zhǎng)期維護(hù)event bus是個(gè)大問題，這里就不多說了。具體可以閱讀具體工具的文檔。

7.Vuex && Pinia

Vuex和Pinia是Vue 3中的狀態(tài)管理工具，使用這兩個(gè)工具可以輕松實(shí)現(xiàn)組件通信。由于這兩個(gè)工具比較強(qiáng)大，這里就不展示了。有關(guān)詳細(xì)信息，請(qǐng)參閱文檔。

最后

以上就是我今天想與你分享的Vue3中的7個(gè)組件通信技巧，如果對(duì)你有幫助的話，請(qǐng)記得點(diǎn)贊我，關(guān)注我，并將這篇文章分享給你的朋友，也許能夠幫助到他。

最后，謝謝你的閱讀。

網(wǎng)頁標(biāo)題：Vue3中的七個(gè)組件通信技巧
轉(zhuǎn)載來源：http://fisionsoft.com.cn/article/djcpeeh.html