Vue组合式API provide/inject问题：未找到settings注入

核心问题是组件嵌套关系错误，提供数据的Test.vue未作为App.vue的祖先组件被渲染，导致provide("settings")从未执行，App.vue自然无法inject到对应的值。

为什么会报错？ #

provide和inject的工作逻辑是：祖先组件通过provide暴露数据，后代组件才能通过inject获取。你的代码里：

• Test.vue虽然写了provide，但它没有被挂载到组件树中，或者没有成为App.vue的父/祖先组件；
• App.vue作为根组件直接尝试inject，找不到任何上层组件提供的settings，所以返回undefined并触发警告。

修正步骤 #

1. 修改Test.vue，添加插槽用于包裹子组件 #

让Test.vue可以作为父容器，承载后代组件：

<script>
import { defineComponent, provide, reactive } from "vue";

export default defineComponent({
  setup() {
    const settings = reactive({
      theme: "light",
      color: "#F092AD",
      id: 69,
    });
    provide("settings", settings);
    return {};
  },
  template: `<slot></slot>`
});
</script>

2. 调整App.vue，将其作为Test.vue的子组件渲染 #

引入并注册Test.vue，用它包裹自己的模板内容，确保App.vue是Test.vue的后代：

<template>
  <Test>
    <pre>{{ settings }}</pre>
  </Test>
</template>

<script>
import { defineComponent, inject } from "vue";
import Test from "./Test.vue";

export default defineComponent({
  components: { Test },
  setup() {
    const settings = inject("settings");
    console.log(`settings → `, settings);
    return { settings };
  },
});
</script>

额外说明 #

如果希望在根组件层级提供数据，也可以直接在App.vue的setup中调用provide，然后在它的子组件中inject——核心始终是提供数据的组件必须在组件树中位于获取数据组件的上层。

内容的提问来源于stack exchange，提问作者LovelyAndy