Vue 中如何获取插槽元素的 Ref？

vue 中获取插槽元素 ref 的解决方案

在 vue 中获取插槽内元素的 ref 是一个常见的需求，尤其是当我们需要对插槽中的元素进行定位或操作时。本文将介绍两种解决方案来获取插槽内元素的 ref。

嵌套一层 div

最简单的方法是在触发元素和内容外套一层 div，然后使用 div 的 ref。这种方法简单易行，但会增加额外的 dom 节点。

<script setup>
  const triggerref = ref()
  const floatingref = ref()
</script>

<template>
  <div ref="triggerref">
    <slot name="trigger" />
  </div>
  <teleport to="body">
    <div ref="floatingref" v-if="show" class="absolute inset-0">
      <slot />
    </div>
  </teleport>
</template>

使用 useslots()

useslots() 是 vue 3.2 及以上版本中新增的 api，它可以获取插槽的虚拟节点 (vnode)。我们可以手动渲染 vnode 并绑定 ref。

<script setup>
  import { ref, useslots } from 'vue'

  const triggerref = ref()
  const floatingref = ref()

  const slots = useslots()
  const triggerarr = slots?.trigger?.()
  const triggervnode = triggerarr[0]
</script>

<template>
  <triggervnode ref="triggerref" />
  <teleport to="body">
    <div ref="floatingref" v-if="show" class="absolute inset-0">
      <slot />
    </div>
  </teleport>
</template>

这种方法可以获取插槽元素的直接 ref，但需要注意以下几点：

• 插槽必须只接收一个元素，否则 triggervnode 会是一个数组。
• 需要手动校验插槽传递的值，确保其是一个有效的元素。

使用 defineslots() (vue 3.3+)

vue 3.3 中引入了 defineslots() 宏，用于定义插槽。我们可以使用 defineslots() 将插槽直接绑定到变量上，避免了手动获取 vnode 的步骤。

<script setup>
  import { ref, defineSlots, useSlots } from 'vue'

  const triggerRef = ref()
  const floatingRef = ref()
  const { trigger } = defineSlots(['trigger'])
</script>

<template>
  <trigger ref="triggerRef" />
  <teleport to="body">
    <div ref="floatingRef" v-if="show" class="absolute inset-0">
      <slot />
    </div>
  </teleport>
</template>

这种方法是最简洁且安全的，但需要 vue 3.3 以上版本支持。