How to bind a property from a slot to the parent component's reference?

[ClementNerma]

Hi all!

Here is a snippet of what i'd like to do:

<script setup lang="ts">
import Child from './Child.vue'

const binded = ref<SomeRefType | null)(null)
</script>

<template>
  <Child v-slot="{ someSlotProperty }">
    <!-- Home do I put `someSlotProperty` into `binded`? -->
  </Child>
</template>

I have no idea how to achieve this, and can't find anything in the docs...

Thanks in advance for your help!

[Shyam-Chen]

Try this:

<Child>
  <template v-for="(_, name) in $slots" #[name]="slotProps">
    <slot :name="name" v-bind="slotProps" />
  </template>
</Child>

[ClementNerma]

I get the following error:

Mixed v-slot usage on both the component and nested <template>. When there are multiple named slots, all slots should use <template> syntax to avoid scope ambiguity.vue(37)

[jacekkarczmarczyk]

You can emit the value from Child component and update binded in the event handler

[ClementNerma]

Yes but I need that to happen synchronously, which events don't permit unfortunately.

[jacekkarczmarczyk]

I suggest explaining why you're trying to achieve or providing runnable reproduction that shows how events don't work