Vue3父子組件間傳參通信的四種方式
前言
本文主要是記錄Vue3在setup語法糖下的父子組件間傳參的四種方式
Vue3+TypeScript
一、父傳子 defineProps
父組件傳值給子組件主要是由父組件為子組件通過v-bind綁定數(shù)值，而后傳給子組件；子組件則通過defineProps接收使用。
如下為父組件Father.vue
<template>
<div class="fa">
<div style="margin: 10px;">我是父組件</div>
<Son :fatherMessage="fatherMessage"></Son>
</div>
</template>
<script setup lang="ts">
import Son from './Son.vue'
import {ref} from "vue";
const fatherMessage = ref<string>("我是父組件傳過來的值")
</script>
<style scoped>
.fa{
border: 3px solid cornflowerblue;
width: 400px;
text-align: center;
}
</style>如下為子組件Son.vue
<template>
<div style="margin: 10px;border: 2px solid red">
我是子組件
<div style="margin: 5px;border: 2px solid gold">
父組件傳值接收區(qū)：{{fatherMessage}}
</div>
</div>
</template>
<script setup lang="ts">
interface Props {
fatherMessage?: string,
}
defineProps<Props>()
</script>父組件Father.vue中在調(diào)用Son.vue這個子組件時，使用v-bind綁定參數(shù)fatherMessage，并傳給Son.vue
子組件Son.vue使用defineProps接收fatherMessage這個參數(shù)，而后就可以正常使用該參數(shù)。
二、子傳父 defineEmits
子組件傳值給父組件主要是子組件通過defineEmits注冊一個自定義事件，而后觸發(fā)emit去調(diào)用該自定義事件，并傳遞參數(shù)給父組件。
在父組件中調(diào)用子組件時，通過v-on綁定一個函數(shù)，通過該函數(shù)獲取傳過來的值。
如下為子組件Son.vue
<template>
<div style="margin: 10px;border: 2px solid red">
我是子組件
<button @click="transValue" style="margin: 5px">傳值給父組件</button>
</div>
</template>
<script setup lang="ts">
import {ref} from "vue";
// 定義所要傳給父組件的值
const value = ref<String>("我是子組件傳給父組件的值")
// 使用defineEmits注冊一個自定義事件
const emit = defineEmits(["getValue"])
// 點擊事件觸發(fā)emit，去調(diào)用我們注冊的自定義事件getValue,并傳遞value參數(shù)至父組件
const transValue = () => {
emit("getValue", value.value)
}
</script>
如下為父組件Father.vue
<template>
<div class="fa">
<div style="margin: 10px;">我是父組件</div>
父組件接收子組件傳的值：{{sonMessage}}
<Son @getValue="getSonValue"></Son>
</div>
</template>
<script setup lang="ts">
import Son from './Son.vue'
import {ref} from "vue";
const sonMessage = ref<string>("")
const getSonValue = (value: string) => {
sonMessage.value = value
}
</script>
<style scoped>
.fa{
border: 3px solid cornflowerblue;
width: 400px;
text-align: center;
}
</style>父組件Father.vue中在調(diào)用Son.vue這個子組件時，當(dāng)子組件Son.vue需要傳參給父組件Father.vue時，使用defineEmits注冊一個事件getValue，而后設(shè)置點擊事件transValue去觸發(fā)emit，去調(diào)用我們注冊的自定義事件getValue,并傳遞value參數(shù)至父組件。
父組件Father.vue在獲取子組件Son.vue傳過來的值時，通過在子組件上使用v-on設(shè)置響應(yīng)函數(shù)getValue（該函數(shù)與子組件中的注冊自定義事件getValue名稱需一致）,并綁定一個函數(shù)getSonValue來獲取傳過來的值。
三、子組件暴露屬性給父組件 defineExpose
當(dāng)父組件想直接調(diào)用父組件的屬性或者方法時，子組件可以使用defineExpose暴露自身的屬性或者方法，父組件中使用ref調(diào)用子組件暴露的屬性或方法。
如下為子組件Son.vue
<template>
<div style="margin: 10px;border: 2px solid red">
我是子組件
</div>
</template>
<script setup lang="ts">
import {ref, defineExpose} from "vue";
// 暴露給父組件的值
const toFatherValue = ref<string>("我是要暴露給父組件的值")
// 暴露給父組件的方法
const toFatherMethod = () => {
console.log("我是要暴露給父組件的方法")
}
// 暴露方法和屬性給父組件
defineExpose({toFatherMethod, toFatherValue})
</script>
如下為父組件Father.vue
<template>
<div class="fa">
<div style="margin: 10px;">我是父組件</div>
<button @click="getSonMethod">獲取子組件的方法</button>
<Son ref="sonMethodRef"></Son>
</div>
</template>
<script setup lang="ts">
import Son from './Son.vue'
import {ref} from "vue";
const sonMethodRef = ref()
const getSonMethod = () => {
sonMethodRef.value.toFatherMethod()
console.log(sonMethodRef.value.toFatherValue)
}
</script>
<style scoped>
.fa{
border: 3px solid cornflowerblue;
width: 400px;
text-align: center;
}
</style>在子組件中定義屬性toFatherValue和方法toFatherMethod，而后通過defineExpose暴露出來。
父組件調(diào)用時，為子組件綁定一個ref，并定義一個ref變量sonMethodRef，通過調(diào)用sonMethodRef,來獲取子組件暴露出來的屬性和方法。
四、依賴注入Provide / Inject
從上面的介紹里我們可以了解到父子組件之間的通信，但是卻存在這樣的情況：有一些多層級嵌套的組件，形成了一顆巨大的組件樹，而某個深層的子組件需要一個較遠(yuǎn)的祖先組件中的部分?jǐn)?shù)據(jù)。在這種情況下，如果僅使用 props 則必須將其沿著組件鏈逐級傳遞下去，這會非常麻煩：
雖然這里的 Footer 組件可能根本不關(guān)心這些 props，但為了使 DeepChild 能訪問到它們，仍然需要定義并向下傳遞。如果組件鏈路非常長，可能會影響到更多這條路上的組件。這一問題被稱為“prop 逐級透傳”，顯然是我們希望盡量避免的情況。provide 和 inject 可以幫助我們解決這一問題。 一個父組件相對于其所有的后代組件，會作為依賴提供者。任何后代的組件樹，無論層級有多深，都可以注入由父組件提供給整條鏈路的依賴。
如下為父組件Root.vue
<template>
<div>
我是root組件
<Footer></Footer>
</div>
</template>
<script setup lang="ts">
import { provide, ref } from 'vue'
import Footer from './Footer.vue'
const toChildValue= ref<string>("我是給所有子組件的值")
// 將toChildValue注入到所有子組件中
provide(/* 注入名 */ 'toChildValue', /* 值 */ toChildValue)
</script>如下為子組件Footer.vue
<template>
<div>
我是footer組件
<div>
接收父組件的值：{{getFatherValue}}
</div>
<DeepChild></DeepChild>
</div>
</template>
<script setup lang="ts">
import DeepChild from "./DeepChild.vue"
import {ref,inject,Ref} from "vue";
// 獲取父組件提供的值
// 如果沒有祖先組件提供 "toChildValue"
// ref("") 會是 "這是默認(rèn)值"
const getFatherValue = inject<Ref<string>>(/* 注入名 */"toChildValue",/* 默認(rèn)值 */ ref(""))
</script>如下為孫子組件DeepChild.vue
<template>
<div>
我是deepChild組件
<div>
接收爺爺組件的值：{{getGrandFatherValue}}
</div>
</div>
</template>
<script setup lang="ts">
import {inject, ref, Ref} from "vue";
// 獲取爺爺組件提供的值
// 如果沒有爺爺組件提供 "toChildValue"
// value 會是 ""
const getGrandFatherValue = inject<Ref<string>>(/* 注入名 */"toChildValue",/* 默認(rèn)值 */ ref(""))
</script>當(dāng)最頂層的組件Root.vue傳值給所有子組件時，使用provide進行注入
provide(/* 注入名 */ 'toChildValue', /* 值 */ toChildValue)
而后無論哪個子組件想要獲取toChildValue的值，只需使用inject即可
inject<Ref<string>>(/* 注入名 */"toChildValue",/* 默認(rèn)值 */ ref(""))當(dāng)提供 / 注入響應(yīng)式的數(shù)據(jù)時，如果想改變數(shù)據(jù)時，建議盡可能將任何對響應(yīng)式狀態(tài)的變更都保持在供給方組件中，即根組件Root.vue。這樣可以確保所提供狀態(tài)的聲明和變更操作都內(nèi)聚在同一個組件內(nèi)，使其更容易維護。
有的時候，我們可能需要在注入方組件中更改數(shù)據(jù)。在這種情況下，我們推薦在供給方組件內(nèi)聲明并提供一個更改數(shù)據(jù)的方法函數(shù)：
如下為父組件Root.vue
<template>
<div>
我是root組件
<Footer></Footer>
</div>
</template>
<script setup lang="ts">
import {InjectionKey, provide, Ref, ref} from 'vue'
import Footer from './Footer.vue'
const toChildValue= ref<string>("我是給所有子組件的值")
/**
* 修改父組件值的方法
*/
const changeValue = () => {
toChildValue.value = "我是父組件修改的值"
}
// 定義一個注入key的類型（建議將注入 key 的類型放在一個單獨的文件中，這樣它就可以被多個組件導(dǎo)入）
interface ProvideType {
toChildValue: Ref<string>;
changeValue: () => void;
}
// 為注入值標(biāo)記類型
const toValue = Symbol() as InjectionKey<ProvideType>
// 將toChildValue和changeValue注入到所有子組件中
provide(/* 注入名 */ 'toValue', /* 值 */{
toChildValue,
changeValue
})
</script>
provide 和 inject 通常會在不同的組件中運行。要正確地為注入的值標(biāo)記類型，Vue 提供了一個 InjectionKey 接口，它是一個繼承自 Symbol 的泛型類型，可以用來在提供者和消費者之間同步注入值的類型。
建議將注入 key 的類型放在一個單獨的文件中，這樣它就可以被多個組件導(dǎo)入。
// 定義一個注入key的類型
//（建議將注入 key 的類型放在一個單獨的文件中，這樣它就可以被多個組件導(dǎo)入）
interface ProvideType {
toChildValue: Ref<string>;
changeValue: () => void;
}
// 為注入值標(biāo)記類型
const toValue = Symbol() as InjectionKey<ProvideType>如下為孫子組件DeepChild.vue
<template>
<div>
我是deepChild組件
<div>
<button @click="changeValue">改變祖先組件的值</button>
{{toChildValue}}
</div>
</div>
</template>
<script setup lang="ts">
import {inject, ref, Ref} from "vue";
// 定義注入值的類型
interface ProvideType {
toChildValue: Ref<string>;
changeValue: () => void;
}
// 解構(gòu)獲取父組件傳的值,需要進行強制類型轉(zhuǎn)換
const {toChildValue, changeValue} = inject(/* 注入名 */"toValue") as ProvideType
// 不解構(gòu)時，只需指定類型即可
// const value = inject<ProvideType>(/* 注入名 */"toValue")
</script>
當(dāng)祖先組件提供參數(shù)與方法時，子組件在解構(gòu)時需要強制轉(zhuǎn)換該值的類型
// 解構(gòu)獲取父組件傳的值
const {toChildValue, changeValue} = inject(/* 注入名 */"toValue") as ProvideType如果子組件在使用時不進行解構(gòu)，則直接指明類型即可
// 不解構(gòu)時，直接指定類型即可 const value = inject<ProvideType>(/* 注入名 */"toValue")
參考
1、小滿ZS 學(xué)習(xí)Vue3 第二十三章（依賴注入Provide / Inject）
總結(jié)
到此這篇關(guān)于Vue3父子組件間傳參通信的四種方式的文章就介紹到這了,更多相關(guān)Vue3父子組件間傳參通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue組件設(shè)計-Sticky布局,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
下面小編就為大家分享一篇mint-ui 時間插件使用及獲取選擇值的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue?懸浮窗且?guī)ё詣游焦δ軐崿F(xiàn)demo
這篇文章主要為大家介紹了vue?懸浮窗且?guī)ё詣游焦δ軐崿F(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了vue如何獲取自定義元素屬性參數(shù)值的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
登錄功能對于前端剛?cè)腴T不久的同學(xué)來說較為困難,下面這篇文章主要給大家介紹了關(guān)于Vue登錄功能實現(xiàn)(含封裝axios)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue Object的變化偵測實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了vue計算屬性及函數(shù)的選擇，文章圍繞主題的相關(guān)資料展開詳細(xì)介紹，需要的小伙伴可以參考一下2022-05-05
vue2使用ts?vue-class-component的過程
vue-property-decorator?是一個?Vue.js?的裝飾器庫,它提供了一些裝飾器來讓你在?Vue?組件中定義屬性、計算屬性、方法、事件等,本文給大家介紹vue2使用ts?vue-class-component的相關(guān)知識,感興趣的朋友一起看看吧2023-11-11
vue.js 嵌套循環(huán)、if判斷、動態(tài)刪除的實例
下面小編就為大家分享一篇vue.js 嵌套循環(huán)、if判斷、動態(tài)刪除的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue使用extend動態(tài)創(chuàng)建組件的實現(xiàn)
本文主要介紹了Vue使用extend動態(tài)創(chuàng)建組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04