VueJS：如何从插槽Props绑定模板引用？

问题根源 #

你当前的写法逻辑存在错误：子组件SlotComponent里定义的element ref属于子组件自身作用域，而插槽内的<div ref="element">是在父组件作用域中执行的——父组件里并没有名为element的ref变量，自然无法将元素绑定到子组件的element上，所以子组件onMounted中输出的element.value始终为null。

解决方案1：通过回调函数传递元素引用（推荐） #

子组件通过作用域插槽暴露一个回调函数，父组件在插槽元素上使用ref的函数形式，将元素实例传递给子组件：

子组件（SlotComponent.vue） #

<template>
  <slot :setElement="setElement"></slot>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";

const element = ref<HTMLElement | null>(null);

// 定义接收元素的回调函数
const setElement = (el: HTMLElement | null) => {
  element.value = el;
};

onMounted(() => {
  console.log(element.value); // 此时能正确获取到插槽内的div元素
});
</script>

父组件使用方式 #

<SlotComponent v-slot="{ setElement }">
  <div ref="setElement">hello world</div>
</SlotComponent>

这种方式不受插槽结构影响，能可靠地获取到目标元素，是最通用的方案。

解决方案2：子组件直接获取插槽元素（局限性较强） #

子组件可以通过useSlots API获取插槽的VNode，结合nextTick在DOM挂载完成后提取元素：

子组件（SlotComponent.vue） #

<template>
  <slot></slot>
</template>
<script setup lang="ts">
import { onMounted, nextTick } from "vue";
import { useSlots } from "vue";

const slots = useSlots();

onMounted(async () => {
  await nextTick(); // 等待DOM完全挂载
  // 仅适用于默认插槽只有单个根元素的情况
  const slotElement = slots.default?.()[0].el as HTMLElement | null;
  console.log(slotElement);
});
</script>

注意事项 #

• 这种方式依赖插槽的结构，如果默认插槽内有多个根元素、嵌套组件或文本节点，需要调整索引或判断逻辑，通用性较差。
• 若插槽内是Vue组件而非原生HTML元素，el属性可能指向组件的根元素，而非组件实例。

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