前言

本文主要是記錄Vue3在setup語法糖下的父子組件間傳參的四種方式

Vue3+TypeScript

一、父?jìng)髯?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這個(gè)子組件時(shí)，使用v-bind綁定參數(shù)fatherMessage，并傳給Son.vue

子組件Son.vue使用defineProps接收fatherMessage這個(gè)參數(shù)，而后就可以正常使用該參數(shù)。

二、子傳父 defineEmits

子組件傳值給父組件主要是子組件通過defineEmits注冊(cè)一個(gè)自定義事件，而后觸發(fā)emit去調(diào)用該自定義事件，并傳遞參數(shù)給父組件。

在父組件中調(diào)用子組件時(shí)，通過v-on綁定一個(gè)函數(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注冊(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傳過來的值時(shí)，通過在子組件上使用v-on設(shè)置響應(yīng)函數(shù)getValue（該函數(shù)與子組件中的注冊(cè)自定義事件getValue名稱需一致）,并綁定一個(gè)函數(shù)getSonValue來獲取傳過來的值。

三、子組件暴露屬性給父組件 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，而后通過defineExpose暴露出來。
父組件調(diào)用時(shí)，為子組件綁定一個(gè)ref，并定義一個(gè)ref變量sonMethodRef，通過調(diào)用sonMethodRef,來獲取子組件暴露出來的屬性和方法。

四、依賴注入Provide / Inject

從上面的介紹里我們可以了解到父子組件之間的通信，但是卻存在這樣的情況：有一些多層級(jí)嵌套的組件，形成了一顆巨大的組件樹，而某個(gè)深層的子組件需要一個(gè)較遠(yuǎn)的祖先組件中的部分?jǐn)?shù)據(jù)。在這種情況下，如果僅使用 props 則必須將其沿著組件鏈逐級(jí)傳遞下去，這會(huì)非常麻煩：

雖然這里的 Footer 組件可能根本不關(guān)心這些 props，但為了使 DeepChild 能訪問到它們，仍然需要定義并向下傳遞。如果組件鏈路非常長(zhǎng)，可能會(huì)影響到更多這條路上的組件。這一問題被稱為“prop 逐級(jí)透?jìng)鳌?/font>，顯然是我們希望盡量避免的情況。
provide 和 inject 可以幫助我們解決這一問題。 一個(gè)父組件相對(duì)于其所有的后代組件，會(huì)作為依賴提供者。任何后代的組件樹，無論層級(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>

<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("") 會(huì)是 "這是默認(rèn)值"
const getFatherValue = inject<Ref<string>>(/* 注入名 */"toChildValue",/* 默認(rèn)值 */ ref(""))

</script>

<template>
  <div>
    我是deepChild組件
    <div>
      接收爺爺組件的值：{{getGrandFatherValue}}
    </div>
  </div>
</template>

<script setup lang="ts">
import {inject, ref, Ref} from "vue";

// 獲取爺爺組件提供的值
// 如果沒有爺爺組件提供 "toChildValue"
// value 會(huì)是 ""
const getGrandFatherValue = inject<Ref<string>>(/* 注入名 */"toChildValue",/* 默認(rèn)值 */ ref(""))
</script>

provide(/* 注入名 */ 'toChildValue', /* 值 */ toChildValue)

inject<Ref<string>>(/* 注入名 */"toChildValue",/* 默認(rèn)值 */ ref(""))

<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的類型（建議將注入 key 的類型放在一個(gè)單獨(dú)的文件中，這樣它就可以被多個(gè)組件導(dǎo)入）
interface ProvideType {
  toChildValue: Ref<string>;
  changeValue: () => void;
}
// 為注入值標(biāo)記類型
const toValue = Symbol() as InjectionKey<ProvideType>
// 將toChildValue和changeValue注入到所有子組件中
provide(/* 注入名 */ 'toValue', /* 值 */{
  toChildValue,
  changeValue
})
</script>

// 定義一個(gè)注入key的類型
//（建議將注入 key 的類型放在一個(gè)單獨(dú)的文件中，這樣它就可以被多個(gè)組件導(dǎo)入）
interface ProvideType {
  toChildValue: Ref<string>;
  changeValue: () => void;
}
// 為注入值標(biāo)記類型
const toValue = Symbol() as InjectionKey<ProvideType>

<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)獲取父組件傳的值,需要進(jìn)行強(qiáng)制類型轉(zhuǎn)換
const {toChildValue, changeValue} = inject(/* 注入名 */"toValue") as ProvideType
// 不解構(gòu)時(shí)，只需指定類型即可
// const value = inject<ProvideType>(/* 注入名 */"toValue")
</script>

// 解構(gòu)獲取父組件傳的值
const {toChildValue, changeValue} = inject(/* 注入名 */"toValue") as ProvideType

// 不解構(gòu)時(shí)，直接指定類型即可
const value = inject<ProvideType>(/* 注入名 */"toValue")