Vue3父子組件間傳參通信的四種方式
前言
本文主要是記錄Vue3在setup語(yǔ)法糖下的父子組件間傳參的四種方式
Vue3+TypeScript
一、父?jìng)髯?defineProps
父組件傳值給子組件主要是由父組件為子組件通過(guò)v-bind綁定數(shù)值，而后傳給子組件；子組件則通過(guò)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>("我是父組件傳過(guò)來(lái)的值")
</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這個(gè)子組件時(shí)，使用v-bind綁定參數(shù)fatherMessage，并傳給Son.vue
子組件Son.vue使用defineProps接收fatherMessage這個(gè)參數(shù)，而后就可以正常使用該參數(shù)。
二、子傳父 defineEmits
子組件傳值給父組件主要是子組件通過(guò)defineEmits注冊(cè)一個(gè)自定義事件，而后觸發(fā)emit去調(diào)用該自定義事件，并傳遞參數(shù)給父組件。
在父組件中調(diào)用子組件時(shí)，通過(guò)v-on綁定一個(gè)函數(shù)，通過(guò)該函數(shù)獲取傳過(guò)來(lái)的值。
如下為子組件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注冊(cè)一個(gè)自定義事件
const emit = defineEmits(["getValue"])
// 點(diǎn)擊事件觸發(fā)emit，去調(diào)用我們注冊(cè)的自定義事件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這個(gè)子組件時(shí)，當(dāng)子組件Son.vue需要傳參給父組件Father.vue時(shí)，使用defineEmits注冊(cè)一個(gè)事件getValue，而后設(shè)置點(diǎn)擊事件transValue去觸發(fā)emit，去調(diào)用我們注冊(cè)的自定義事件getValue,并傳遞value參數(shù)至父組件。
父組件Father.vue在獲取子組件Son.vue傳過(guò)來(lái)的值時(shí)，通過(guò)在子組件上使用v-on設(shè)置響應(yīng)函數(shù)getValue（該函數(shù)與子組件中的注冊(cè)自定義事件getValue名稱需一致）,并綁定一個(gè)函數(shù)getSonValue來(lái)獲取傳過(guò)來(lái)的值。
三、子組件暴露屬性給父組件 defineExpose
當(dāng)父組件想直接調(diào)用父組件的屬性或者方法時(shí)，子組件可以使用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，而后通過(guò)defineExpose暴露出來(lái)。
父組件調(diào)用時(shí)，為子組件綁定一個(gè)ref，并定義一個(gè)ref變量sonMethodRef，通過(guò)調(diào)用sonMethodRef,來(lái)獲取子組件暴露出來(lái)的屬性和方法。
四、依賴注入Provide / Inject
從上面的介紹里我們可以了解到父子組件之間的通信，但是卻存在這樣的情況：有一些多層級(jí)嵌套的組件，形成了一顆巨大的組件樹(shù)，而某個(gè)深層的子組件需要一個(gè)較遠(yuǎn)的祖先組件中的部分?jǐn)?shù)據(jù)。在這種情況下，如果僅使用 props 則必須將其沿著組件鏈逐級(jí)傳遞下去，這會(huì)非常麻煩：
雖然這里的 Footer 組件可能根本不關(guān)心這些 props，但為了使 DeepChild 能訪問(wèn)到它們，仍然需要定義并向下傳遞。如果組件鏈路非常長(zhǎng)，可能會(huì)影響到更多這條路上的組件。這一問(wèn)題被稱為“prop 逐級(jí)透?jìng)?rdquo;，顯然是我們希望盡量避免的情況。provide 和 inject 可以幫助我們解決這一問(wèn)題。 一個(gè)父組件相對(duì)于其所有的后代組件，會(huì)作為依賴提供者。任何后代的組件樹(shù)，無(wú)論層級(jí)有多深，都可以注入由父組件提供給整條鏈路的依賴。
如下為父組件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";
// 獲取父組件提供的值
// 如果沒(méi)有祖先組件提供 "toChildValue"
// ref("") 會(huì)是 "這是默認(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";
// 獲取爺爺組件提供的值
// 如果沒(méi)有爺爺組件提供 "toChildValue"
// value 會(huì)是 ""
const getGrandFatherValue = inject<Ref<string>>(/* 注入名 */"toChildValue",/* 默認(rèn)值 */ ref(""))
</script>當(dāng)最頂層的組件Root.vue傳值給所有子組件時(shí)，使用provide進(jìn)行注入
provide(/* 注入名 */ 'toChildValue', /* 值 */ toChildValue)
而后無(wú)論哪個(gè)子組件想要獲取toChildValue的值，只需使用inject即可
inject<Ref<string>>(/* 注入名 */"toChildValue",/* 默認(rèn)值 */ ref(""))當(dāng)提供 / 注入響應(yīng)式的數(shù)據(jù)時(shí)，如果想改變數(shù)據(jù)時(shí)，建議盡可能將任何對(duì)響應(yīng)式狀態(tài)的變更都保持在供給方組件中，即根組件Root.vue。這樣可以確保所提供狀態(tài)的聲明和變更操作都內(nèi)聚在同一個(gè)組件內(nèi)，使其更容易維護(hù)。
有的時(shí)候，我們可能需要在注入方組件中更改數(shù)據(jù)。在這種情況下，我們推薦在供給方組件內(nèi)聲明并提供一個(gè)更改數(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 = "我是父組件修改的值"
}
// 定義一個(gè)注入key的類(lèi)型（建議將注入 key 的類(lèi)型放在一個(gè)單獨(dú)的文件中，這樣它就可以被多個(gè)組件導(dǎo)入）
interface ProvideType {
toChildValue: Ref<string>;
changeValue: () => void;
}
// 為注入值標(biāo)記類(lèi)型
const toValue = Symbol() as InjectionKey<ProvideType>
// 將toChildValue和changeValue注入到所有子組件中
provide(/* 注入名 */ 'toValue', /* 值 */{
toChildValue,
changeValue
})
</script>
provide 和 inject 通常會(huì)在不同的組件中運(yùn)行。要正確地為注入的值標(biāo)記類(lèi)型，Vue 提供了一個(gè) InjectionKey 接口，它是一個(gè)繼承自 Symbol 的泛型類(lèi)型，可以用來(lái)在提供者和消費(fèi)者之間同步注入值的類(lèi)型。
建議將注入 key 的類(lèi)型放在一個(gè)單獨(dú)的文件中，這樣它就可以被多個(gè)組件導(dǎo)入。
// 定義一個(gè)注入key的類(lèi)型
//（建議將注入 key 的類(lèi)型放在一個(gè)單獨(dú)的文件中，這樣它就可以被多個(gè)組件導(dǎo)入）
interface ProvideType {
toChildValue: Ref<string>;
changeValue: () => void;
}
// 為注入值標(biāo)記類(lèi)型
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";
// 定義注入值的類(lèi)型
interface ProvideType {
toChildValue: Ref<string>;
changeValue: () => void;
}
// 解構(gòu)獲取父組件傳的值,需要進(jìn)行強(qiáng)制類(lèi)型轉(zhuǎn)換
const {toChildValue, changeValue} = inject(/* 注入名 */"toValue") as ProvideType
// 不解構(gòu)時(shí)，只需指定類(lèi)型即可
// const value = inject<ProvideType>(/* 注入名 */"toValue")
</script>
當(dāng)祖先組件提供參數(shù)與方法時(shí)，子組件在解構(gòu)時(shí)需要強(qiáng)制轉(zhuǎn)換該值的類(lèi)型
// 解構(gòu)獲取父組件傳的值
const {toChildValue, changeValue} = inject(/* 注入名 */"toValue") as ProvideType如果子組件在使用時(shí)不進(jìn)行解構(gòu)，則直接指明類(lèi)型即可
// 不解構(gòu)時(shí)，直接指定類(lèi)型即可 const value = inject<ProvideType>(/* 注入名 */"toValue")
參考
1、小滿ZS 學(xué)習(xí)Vue3 第二十三章（依賴注入Provide / Inject）
總結(jié)
到此這篇關(guān)于Vue3父子組件間傳參通信的四種方式的文章就介紹到這了,更多相關(guān)Vue3父子組件間傳參通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3子組件watch無(wú)法監(jiān)聽(tīng)父組件傳遞的屬性值的解決方法
這篇文章主要介紹了Vue3子組件watch無(wú)法監(jiān)聽(tīng)父組件傳遞的屬性值的解決方法,文中通過(guò)代碼示例講解的講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-10-10
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
這篇文章主要介紹了vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-02-02
這篇文章主要介紹了VUE-ElementUI 自定義Loading圖操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要為大家詳細(xì)介紹了vue卡片式點(diǎn)擊切換圖片組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
Vue.js 中取得后臺(tái)原生HTML字符串 原樣顯示問(wèn)題的解決方法
這篇文章主要介紹了VUE.js 中取得后臺(tái)原生HTML字符串 原樣顯示問(wèn)題 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
VUE項(xiàng)目去除input 框值所有空格的操作方法
這篇文章主要介紹了VUE項(xiàng)目去除input 框值所有空格的操作方法，主要包括去除空格的方法、正則和element ui寫(xiě)法，本文給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-10-10
這篇文章主要為大家介紹了Vue3組件間傳值避坑方法指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
關(guān)于VueRouter導(dǎo)入的全過(guò)程
這篇文章主要介紹了關(guān)于VueRouter導(dǎo)入的全過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
淺談mint-ui loadmore組件注意的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談mint-ui loadmore組件注意的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
vue.js中created()與activated()的個(gè)人使用解讀
這篇文章主要介紹了vue.js中created()與activated()的個(gè)人使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07