Vue3 provide（父） + inject（子、子的子...）进行值的传递及显示

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