日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

寫在前面

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

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

開始搞事情~

舉一個栗子

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

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

demo.gif

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

Props方式

Props方式是Vue中最常見的一種父傳子的一種方式，使用也比較簡單。

根據(jù)上面的demo，我們將數(shù)據(jù)以及對數(shù)據(jù)的操作定義在父組件，子組件僅做列表的一個渲染；

父組件代碼如下：

復(fù)制代碼

子組件只需要對父組件傳遞的值進行渲染即可，代碼如下：

復(fù)制代碼

emit方式

emit方式也是Vue中最常見的組件通信方式，該方式用于子傳父；

根據(jù)上面的demo，我們將列表定義在父組件，子組件只需要傳遞添加的值即可。

子組件代碼如下：

復(fù)制代碼

在子組件中點擊【添加】按鈕后，emit一個自定義事件，并將添加的值作為參數(shù)傳遞。

父組件代碼如下：

復(fù)制代碼

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

v-model方式

v-model是Vue中一個比較出色的語法糖，就比如下面這段代碼

復(fù)制代碼

就是下面這段代碼的簡寫形勢

復(fù)制代碼

v-model確實簡便了不少，現(xiàn)在我們就來看一下上面那個demo，如何用v-model實現(xiàn)。

子組件

復(fù)制代碼

在子組件中我們首先定義props和emits，然后添加完成之后emit指定事件。

注：update:*是Vue中的固定寫法，*表示props中的某個屬性名。

父組件中使用就比較簡單，代碼如下：

復(fù)制代碼

refs方式

在使用選項式API時，我們可以通過this.$refs.name的方式獲取指定元素或者組件，但是組合式API中就無法使用哪種方式獲取。如果我們想要通過ref的方式獲取組件或者元素，需要定義一個同名的Ref對象，在組件掛載后就可以訪問了。

示例代碼如下：