Change slot props from child

user_2355730 0
Viewed 989

In Vue JS, how to pass a component as a prop (or a slot) of another component, while been able to set it's own props from a grandchild component ?

Parent :

<template>
  <Child>
    <SomeComponent />
  </Child>
</template>

Child :

<template>
  <GrandChild>
    <slot></slot>
  </GrandChild>
</template>

Grandchild :

<template>
  <slot :content="content"></slot> //Setting the props of <SomeComponent/> here
</template>
vue-props vuejs3 vue-component vue.js
1 Answers

Use "v-slot:default"!

Parent :

<template>
  <Child>
    <template v-slot:default="slotProps">
      <SomeComponent :content="slotProps.content"/>
    </template>
  </Child>
</template>

Child :

<template>
  <GrandChild>
    <template v-slot:default="slotProps">
        <slot :content="slotProps.content"></slot>
    </template>
  </GrandChild>
</template>

Grandchild :

<template>
  <slot :content="content"></slot>
</template>

I recommend you refer to this document.

https://v3.vuejs.org/guide/component-slots.html#scoped-slots

user_100175900
Related