[Vuejs]-VueJS: Template Refs binding from slot props?

0👍

use Function Refs

provide a setElement() function as a slot prop

<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>

usage

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

Leave a comment