<!-- Same as 1 but in Composition API -->
<!-- App.vue -->
<script setup>
import SlotVue from "./Slot.vue"
</script>

<template>
  <SlotVue>
    <template #child="{ setRef }">
   		<button :ref="(el) => setRef(el)">
     		child
   		</button>
			</template>
  </SlotVue>
</template>

<!-- Slot.vue - child -->
<script setup>
import { ref } from 'vue'

const slotRef = ref()
const setSlotRef = (el) => {
  console.log(el, "xxcc") // only once in assign
  slotRef.value = el;
}

const onClick = () => {
  console.log(slotRef.value)
}
</script>

<template>
  <p>
    press f12 to open a developer tools
  </p>
  <slot name="child" :set-ref="setSlotRef"/>
  <button @click="onClick">
    console.log slot
  </button>
</template>