父组件
<template>
<div>
<h1>我是父组件 {{num}}</h1>
<hr>
<child></child>
</div>
</template>
<script setup>
import child from './child.vue';
import { ref,provide } from 'vue';
let num = ref(520)
provide('parentNum',num)
</script>
子组件
<template>
<div>
<h2>我是子组件</h2>
<hr>
<grandchild></grandchild>
</div>
</template>
<script setup>
import grandchild from './grandchild.vue';
</script>
孙子组件
<template>
<div>
<h3>我是孙子组件</h3>
<p>这是爷爷的值 {{parentNum}}</p>
<button @click="handler">点击我爷爷的值减100</button>
</div>
</template>
<script setup>
import { inject } from 'vue';
let parentNum = inject('parentNum')
const handler = () => {
parentNum.value -= 100
}
</script>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/83dd300bd997591facddf9e43cd5cf2c.png)