寫(xiě)在前面 本篇文章是全部采用的 <script setup> 這種組合式API寫(xiě)法，相對(duì)于選項(xiàng)式來(lái)說(shuō)，組合式API這種寫(xiě)法更加自由，具體可以參考Vue文檔 [1] 對(duì)兩種方式的描述。
本篇文章將介紹如下七種組件通信方式：
開(kāi)始搞事情~
舉一個(gè)栗子 俗話(huà)說(shuō)的好，學(xué)習(xí)不寫(xiě)demo，那就是耍流氓~
本篇文章將圍繞下面這個(gè)demo，如下圖所示：
demo.gif
上圖中，_列表_和_輸入框_分別是父子組件，根據(jù)不同傳值方式，可能誰(shuí)是父組件誰(shuí)是子組件會(huì)有所調(diào)整。
Props方式 Props 方式是Vue中最常見(jiàn)的一種父?jìng)髯?/strong>的一種方式，使用也比較簡(jiǎn)單。
根據(jù)上面的demo，我們將數(shù)據(jù)以及對(duì)數(shù)據(jù)的操作定義在父組件，子組件僅做列表的一個(gè)渲染；
父組件代碼如下：
<template> <!-- 子組件 --> <child-components :list ='list' ></child-components > <!-- 父組件 --> <div class ='child-wrap input-group' > <input v-model ='value' type ='text' class ='form-control' placeholder ='請(qǐng)輸入' /> <div class ='input-group-append' > <button @click ='handleAdd' class ='btn btn-primary' type ='button' > 添加 </button > </div > </div > /template><script setup>import { ref } from 'vue'import ChildComponents from './ child.vue'const list = ref([' JavaScript', ' HTML', ' CSS'])const value = ref('')// add 觸發(fā)后的事件處理函數(shù)const handleAdd = () => { list.value.push(value.value) value.value = ''}</script>復(fù)制代碼 子組件只需要對(duì)父組件傳遞的值進(jìn)行渲染即可，代碼如下：
<template> <ul class ='parent list-group' > <li class ='list-group-item' v-for ='i in props.list' :key ='i' > {{ i }}</li > </ul > /template><script setup>import { defineProps } from 'vue'const props = defineProps({ list: { type: Array, default: () => [], },})</ script>復(fù)制代碼emit方式 emit 方式也是Vue中最常見(jiàn)的組件通信方式，該方式用于子傳父 ；
根據(jù)上面的demo，我們將列表定義在父組件，子組件只需要傳遞添加的值即可。
子組件代碼如下：
<template> <div class ='child-wrap input-group' > <input v-model ='value' type ='text' class ='form-control' placeholder ='請(qǐng)輸入' /> <div class ='input-group-append' > <button @click ='handleSubmit' class ='btn btn-primary' type ='button' > 添加 </button > </div > </div > /template><script setup>import { ref, defineEmits } from 'vue'const value = ref('')const emits = defineEmits(['add'])const handleSubmit = () => { emits('add', value.value) value.value = ''}</ script>復(fù)制代碼在子組件中點(diǎn)擊【添加】按鈕后， emit 一個(gè)自定義事件，并將添加的值作為參數(shù)傳遞。
父組件代碼如下：
<template> <!-- 父組件 --> <ul class ='parent list-group' > <li class ='list-group-item' v-for ='i in list' :key ='i' > {{ i }}</li > </ul > <child-components @add ='handleAdd' ></child-components > </template><script setup>import { ref } from 'vue'import ChildComponents from './ child.vue'const list = ref([' JavaScript', ' HTML', ' CSS'])// add 觸發(fā)后的事件處理函數(shù)const handleAdd = value => { list.value.push(value)}</script>復(fù)制代碼 在父組件中只需要監(jiān)聽(tīng)子組件自定義的事件，然后執(zhí)行對(duì)應(yīng)的添加操作。
v-model方式 v-model 是Vue中一個(gè)比較出色的語(yǔ)法糖，就比如下面這段代碼
<ChildComponent v-model:title='pageTitle' />復(fù)制代碼就是下面這段代碼的簡(jiǎn)寫(xiě)形勢(shì)
<ChildComponent :title='pageTitle' @update:title='pageTitle = $event' />復(fù)制代碼v-model 確實(shí)簡(jiǎn)便了不少，現(xiàn)在我們就來(lái)看一下上面那個(gè)demo，如何用v-model實(shí)現(xiàn)。
子組件
<template> <div class ='child-wrap input-group' > <input v-model ='value' type ='text' class ='form-control' placeholder ='請(qǐng)輸入' /> <div class ='input-group-append' > <button @click ='handleAdd' class ='btn btn-primary' type ='button' > 添加 </button > </div > </div > /template><script setup>import { ref, defineEmits, defineProps } from 'vue'const value = ref('')const props = defineProps({ list: { type: Array, default: () => [], },})const emits = defineEmits(['update:list'])// 添加操作const handleAdd = () => { const arr = props.list arr.push(value.value) emits('update:list', arr) value.value = ''}</ script>復(fù)制代碼在子組件中我們首先定義 props 和 emits ，然后添加完成之后 emit 指定事件。
注： update:* 是Vue中的固定寫(xiě)法， * 表示 props 中的某個(gè)屬性名。
父組件中使用就比較簡(jiǎn)單，代碼如下：
<template> <!-- 父組件 --> <ul class ='parent list-group' > <li class ='list-group-item' v-for ='i in list' :key ='i' > {{ i }}</li > </ul > <child-components v-model:list ='list' ></child-components > </template><script setup>import { ref } from 'vue'import ChildComponents from './ child.vue'const list = ref([' JavaScript', ' HTML', ' CSS'])</script>復(fù)制代碼 refs方式 在使用選項(xiàng)式API時(shí)，我們可以通過(guò) this.$refs.name 的方式獲取指定元素或者組件，但是組合式API中就無(wú)法使用哪種方式獲取。如果我們想要通過(guò) ref 的方式獲取組件或者元素，需要定義一個(gè)同名的Ref對(duì)象，在組件掛載后就可以訪(fǎng)問(wèn)了。
示例代碼如下：
<template> <ul class ='parent list-group' > <li class ='list-group-item' v-for ='i in childRefs?.list' :key ='i' > {{ i }} </li > </ul > <child-components ref ='childRefs' ></child-components > <!-- 父組件 --></template><script setup>import { ref } from 'vue'import ChildComponents from './ child.vue'const childRefs = ref(null)</script>復(fù)制代碼 子組件代碼如下：
<template> <div class ='child-wrap input-group' > <input v-model ='value' type ='text' class ='form-control' placeholder ='請(qǐng)輸入' /> <div class ='input-group-append' > <button @click ='handleAdd' class ='btn btn-primary' type ='button' > 添加 </button > </div > </div > /template><script setup>import { ref, defineExpose } from 'vue'const list = ref(['JavaScript', 'HTML', 'CSS'])const value = ref('')// add 觸發(fā)后的事件處理函數(shù)const handleAdd = () => { list.value.push(value.value) value.value = ''}defineExpose({ list })</ script>復(fù)制代碼setup 組件默認(rèn)是關(guān)閉的，也即通過(guò)模板 ref 獲取到的組件的公開(kāi)實(shí)例，不會(huì)暴露任何在 ** <script setup> **中聲明的綁定 。如果需要**公開(kāi)需要通過(guò)**** defineExpose **** API暴露**。
provide/inject方式 provide 和 inject 是Vue中提供的一對(duì)API，該API可以實(shí)現(xiàn)父組件向子組件傳遞數(shù)據(jù)，無(wú)論層級(jí)有多深，都可以通過(guò)這對(duì)API實(shí)現(xiàn)。示例代碼如下所示：
父組件
<template> <!-- 子組件 --> <child-components ></child-components > <!-- 父組件 --> <div class ='child-wrap input-group' > <input v-model ='value' type ='text' class ='form-control' placeholder ='請(qǐng)輸入' /> <div class ='input-group-append' > <button @click ='handleAdd' class ='btn btn-primary' type ='button' > 添加 </button > </div > </div > /template><script setup>import { ref, provide } from 'vue'import ChildComponents from './ child.vue'const list = ref([' JavaScript', ' HTML', ' CSS'])const value = ref('')// 向子組件提供數(shù)據(jù)provide(' list', list.value)// add 觸發(fā)后的事件處理函數(shù)const handleAdd = () => { list.value.push(value.value) value.value = ''}</script>復(fù)制代碼 子組件
<template> <ul class ='parent list-group' > <li class ='list-group-item' v-for ='i in list' :key ='i' > {{ i }}</li > </ul > /template><script setup>import { inject } from 'vue'// 接受父組件提供的數(shù)據(jù)const list = inject('list')</ script>復(fù)制代碼值得注意的是使用 provide進(jìn)行數(shù)據(jù)傳遞時(shí)，盡量readonly進(jìn)行數(shù)據(jù)的包裝，避免子組件修改父級(jí)傳遞過(guò)去的數(shù)據(jù)
事件總線(xiàn) Vue3中移除了事件總線(xiàn)，但是可以借助于第三方工具來(lái)完成，Vue官方推薦mitt [2] 或tiny-emitter [3] ；
在大多數(shù)情況下不推薦使用全局事件總線(xiàn)的方式來(lái)實(shí)現(xiàn)組件通信，雖然比較簡(jiǎn)單粗暴，但是長(zhǎng)久來(lái)說(shuō)維護(hù)事件總線(xiàn)是一個(gè)大難題，所以這里就不展開(kāi)講解了，具體可以閱讀具體工具的文檔
狀態(tài)管理工具 Vuex [4] 和Pinia [5] 是Vue3中的狀態(tài)管理工具，使用這兩個(gè)工具可以輕松實(shí)現(xiàn)組件通信，由于這兩個(gè)工具功能比較強(qiáng)大，這里就不做展示了，具體可以查閱文檔
寫(xiě)在最后 本篇文章到這就結(jié)束了，總的來(lái)說(shuō)比較簡(jiǎn)單，沒(méi)有什么復(fù)雜內(nèi)容。
如果這篇文章對(duì)你來(lái)說(shuō)有點(diǎn)作用，歡迎點(diǎn)贊、評(píng)論、收藏，避免在需要的時(shí)候找不到。
如果文中有錯(cuò)誤，歡迎指正~
作 者 ：
鏈 接 ：https://juejin.cn/post/7062740057018335245
400 186 1886
