vue.js 从插槽 prop 绑定模板引用？

ljsrvy3e 于 2023-02-09 发布在 Vue.js

关注(0)|答案(1)|浏览(159)

我有一个带插槽的组件（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生命周期回调中，该元素为null（上面的代码片段）。

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

问：如何绑定到slot中的html元素？

vue.js

来源：https://stackoverflow.com/questions/75352085/vuejs-template-refs-binding-from-slot-props

1条答案

按热度按时间

f1tvaqid1#

使用函数引用
提供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>

赞(0）回复(0）举报 2023-02-09

我来回答

vue.js 从插槽 prop 绑定模板引用？

1条答案

相关问题

热门标签

最新问答