Access ref from slot in my component

[gimler]

I have a component that defines a slot.

// MyComponent.vue
<template>
  <form ref="form">
    <slot></slot>
  </form
</template>

<script setup>
import { onMounted, ref, useTemplateRef } from "vue";

const child = ref(null);
const form = ref(null);
const childRef = useTemplateRef('child');

onMounted(() => {
  console.log(child.value);
  console.log(childRef.value);
})
</script>

When i use this component i define a ref on a child component in the default slot

<my-component>
  <my-child ref="child">
  <my-btn ref="btn">
</my-component>

i always getting null. The form ref works.

I found this hack

form.value.__vnode.children[0].dynamicChildren[0]

Why

I need to call a method from my-child (use defineExpose) when clicking on my-btn.

Question:

Is there a better way to access the ref in the slot?

[Mookiepiece]

Use slot props or provide/inject instead of ref solves your problem.

---

Incomplete code snippet using provide/inject.

// MyComponent.vue
<script setup>
const child = ref(), btn = ref();
provide('M',reactive({ child, btn }));
</script>

// MyBtn.vue
<script setup>
const onClick = () => { }
const M = inject('M') || {};
watchEffect(()=>{ M.btn = { onClick } })
</script>

---

You can even use HTML id and querySelectorAll to select child elements and dispatch custom events on them.