CODEWITHSUNDEEP
vue.jsvue-componentvuejs3vue-props
Naourass Derouichi
Naourass Derouichi

Reputation: 793

Change slot props from child

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>

Upvotes: 1

Views: 2807

Answers (1)

Moon Juhan
Moon Juhan

Reputation: 69

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

Upvotes: 2

Related Questions