1、先上个图：

2、我们在App.vue下面声明了一个provide，然后子与子的子，就可以利用inject来接收这个值。

代码结构：

父的代码：App.vue

<script setup lang="ts">
import { provide, ref } from "vue";
import HelloWorld from "./components/HelloWorld.vue";// 提供响应式的值
const count = ref(0);
provide("count", count);
</script><template><div><!-- <a href="https://vitejs.dev" target="_blank"><img src="/vite.svg" class="logo" alt="Vite logo" /></a><a href="https://vuejs.org/" target="_blank"><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /></a> --><el-button type="primary" @click="count++">Primary</el-button><HelloWorld msg="Vite + Vue" /></div></template><style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

子的代码：HelloWorld.vue

子的子代码：

<script setup lang="ts">
import { inject } from "vue";// 注入响应式的值
const count = inject("count");
</script><template><h3 class="custom-html">sub- {{ count }}</h3>
</template><style scoped>
.read-the-docs {color: #888;
}.custom-html {background-color: #ff0;border: 1px solid #0000ff;padding: 10px;color: #000;
}
</style>

说明：子与子的子代码可以类似就行，子的代码比较多，因为之前做了一个x6的demo。

3、最终的效果：

4、最后我们总结一下：

provide（父） + inject（子、子的子...），只要是父中定义了，那么不同你有多少层，只要inject的了，都会很轻松的显示出来。

这个对于多层嵌套的时候，传值还是比较方便的。

5、官网地址：

https://cn.vuejs.org/api/composition-api-dependency-injection.html#inject