VueJS：来自插槽道具的模板引用绑定？答案

【问题标题】：VueJS: Template Refs binding from slot props?VueJS：来自插槽道具的模板引用绑定？
【发布时间】：2023-02-05 20:38:03
【问题描述】：

例如，我有一个带有插槽 (SlotComponent) 的组件

<template>
  <slot :element="element"></slot>
</template>
<script setup lang="ts">
  import { onMounted, ref } from "vue";
  const element = ref<HTMLElement | null>(null);

  onMounted(() => console.log(element.value));
</script>

但是，在使用组件时，我似乎无法将元素绑定到插槽中。该元素在 onMounted 生命周期回调（在 sn-p 之上）中为 null。

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

问题：如何绑定到插槽内的 html 元素？

【问题讨论】：

标签： vue.js vue-component vuejs3 vue-composition-api

【解决方案1】：

使用Function Refs

提供一个 setElement() 函数作为插槽道具

<template>
  <slot :set-element="setElement"></slot>
</template>
<script setup lang="ts">
  import { ref, watchEffect } from "vue";
  const element = ref<Element | null>(null);

  function setElement(el: Element) {
    element.value = el;
  }

  watchEffect(() => {
    console.log(element.value);
  });
</script>

用法

<SlotComponent v-slot="{ setElement }">
  <div :ref="(el) => setElement(el)">Hello World</div>
</SlotComponent>

【讨论】：