当前位置：首页 > news >正文

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

news 2025/11/26 18:59:15

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、最终的效果：