Vue 3 跨层级组件通信（祖父与重孙的传值）

代码演示效果：

祖父组件代码：

<script setup>
import { provide, ref } from 'vue'
import SonCom from '@/components/SonComponentOne.vue'

const testNumber = ref(100)
const changeTestNumber = (newTestNumber => {
    testNumber.value = newTestNumber
})

// 传递变量
provide('testNumber', testNumber)

// 传递放法
provide('changeTestNumber', (newTestNumber) => {
    testNumber.value = newTestNumber
})

</script>

<template>
<div>
    <h1> 最高层级组件-祖先 - {{ testNumber }}</h1>
    <SonCom></SonCom>
</div>
</template>

<style scoped>

</style>

 中间组件代码：

<script setup>
import GrandSon from '@/components/GrandSonComponentOne.vue'

</script>

<template>
 <h2>中间组件</h2>
 <GrandSon></GrandSon>
</template>

<style scoped>

</style>

底层组件代码：

<script setup>
import { inject } from 'vue'
// 接收变量
const testNumber = inject('testNumber')
// 接收方法
const changeTestNumber = inject('changeTestNumber')

const clickFunction = () => {
    changeTestNumber(99999999999999)
}
</script>

<template>
<h3>最下层组件 - {{ testNumber }}</h3>
<button @click="clickFunction"> 更新 </button>
</template>

<style scoped>

</style>