Vue3中使用Provide/Inject传递Template Ref遇null问题求助

问题场景 #

现有SecondLayer.vue、HelloWorld.vue、Calendar.vue三个Vue组件，想要在SecondLayer.vue中提供模板引用childrenRef，让Calendar.vue通过inject访问。目前SecondLayer.vue的onMounted钩子中能正常看到childrenRef指向对应DOM元素，但Calendar.vue的onMounted里test1能正常输出，childrenRef却返回null。

组件代码 #

SecondLayer.vue #

<template>
    <div ref="childrenRef">
        This is from the second layer HEADER
        <slot name="header"></slot>
        This is the from second layer MAIN. The price is: {{ test }}
        <slot name="main"></slot>
    </div>
</template>
<script setup>
import { inject, provide, ref, onMounted } from "vue";

const test = inject("price");
const childrenRef = ref(null);
const test1 = ref("TEST1");
console.log(childrenRef.value);
// provide("childrenRef", childrenRef.value);
provide("test1", test1.value);

onMounted(() => {
    console.log(childrenRef.value);
    provide("childrenRef", childrenRef.value);
});

console.log(test);
</script>

HelloWorld.vue #

<template>
  <div class="greetings">
    <second-layer>
      <template #header>
        <button>A button for the header</button>
      </template>

      <template #main>
        <button>A button for main</button>
        <Calendar/>
      </template>
    </second-layer>
    <h1 class="green">{{ msg }}</h1>
    <h3>
      You’ve successfully created a project with Vite + Vue 3. What's next?
    </h3>
  </div>
</template>

Calendar.vue #

<script setup>
import { inject, watch, onMounted, nextTick } from "vue";
const selectedDaysInMonth = ref([]);
const selectedYear = ref(2024);
const selectedMonth = ref(5);

const childrenRef: any = inject("childrenRef");
const test1: any = inject("test1");
watch(childrenRef, newVal => {
    console.log(newVal);
})

onMounted( async () => {
    selectedDaysInMonth.value = daysInMonth(selectedYear.value, selectedMonth.value);
    await nextTick();
    console.log(test1);
    console.log(childrenRef);
})
</script>

核心原因 #

1. 插槽渲染上下文导致的组件层级问题 #

Calendar.vue是在HelloWorld.vue的插槽内容中渲染的，Vue插槽内容属于父组件（HelloWorld）的渲染上下文，而非插槽所在的组件（SecondLayer）。依赖注入（provide/inject）的作用范围是基于组件树层级而非DOM层级，也就是说：

• 组件树结构为：根组件 → HelloWorld → SecondLayer、Calendar
• Calendar与SecondLayer是同级组件，并非SecondLayer的子组件，因此Calendar无法通过inject获取到SecondLayer提供的值。

2. Provide时机与值类型的问题 #

即使组件层级正确，你在onMounted中provide的是childrenRef.value（DOM元素的快照），而非ref对象本身，后续ref值变化时inject端无法响应。同时inject在组件setup阶段就已执行，此时SecondLayer的onMounted还未触发，因此inject到的是初始的空值。

解决方案 #

方案一：通过插槽Props传递模板引用（推荐） #

这是最符合Vue组件通信规范的方式，适配插槽的上下文特性：

1. 修改SecondLayer.vue，给main插槽绑定ref：

<slot name="main" :childrenRef="childrenRef"></slot>

2. 在HelloWorld.vue中接收插槽Props并传递给Calendar：

<template #main="{ childrenRef }">
  <button>A button for main</button>
  <Calendar :childrenRef="childrenRef" />
</template>

3. 在Calendar.vue中通过Props接收替代inject：

<script setup>
const props = defineProps({
  childrenRef: {
    type: Object,
    default: null
  }
});

watch(props.childrenRef, newVal => {
  console.log(newVal);
});

onMounted(async () => {
  await nextTick();
  console.log(props.childrenRef);
});
</script>

方案二：调整组件层级，让Calendar成为SecondLayer的子组件 #

如果不需要插槽的灵活性，可直接将Calendar放入SecondLayer.vue的模板中，使其处于SecondLayer的组件树范围内：

1. 修改SecondLayer.vue的模板与setup：

<template>
  <div ref="childrenRef">
    This is from the second layer HEADER
    <slot name="header"></slot>
    This is the from second layer MAIN. The price is: {{ test }}
    <slot name="main"></slot>
    <Calendar />
  </div>
</template>
<script setup>
// 顶层provide ref对象，确保inject端能响应变化
provide("childrenRef", childrenRef);
</script>

2. 在Calendar.vue中通过inject获取ref对象：

const childrenRef = inject("childrenRef");
watch(childrenRef, (newVal) => {
  console.log(newVal.value);
});

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