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.

[aniruddhaadak80]

Hi @gimler!

Working with Vue reactivity system and compilers can sometimes present interesting edge cases. A few quick things to consider regarding this topic:

1. Reactivity & Refs: Remember that reactive() unwraps refs automatically, but accessing private properties of proxy classes inherently breaks proxy traps. Always interact with the standard exposed endpoints.
2. Component Lifecycle & state: If you are mixing <script setup>, ensure you aren???t trying to mutate props directly or losing reactivity when destructuring (use toRefs if needed).

I highly recommend checking out the Vue DevTools extension to inspect the component tree and verify if the state is updating as expected. Let me know if you want to dig deeper into the specific component logic.

Hope this points you in the right direction! Let me know how it goes. Happy coding!