-1

I am trying to pass a custom component as slot from a parent component to grandchild with props that are calculated in child.

The grandchild component has a v-for loop in it, and the component that is eventually passed to the it gets its props from the grandchild. These props are optional in the custom component's template and only the custom component is passed to the parent without any props are passed to the parent.

// Parent, no props are passed to RowComponent
<Child
   :array="this.data">
  <RowComponent/>
</Child>

// Child, no props are passed to the slot
  <template #detailed>
    <GrandChild :data="this.data">
      <slot></slot>
    </GrandChild>
  </template>

// Grandchild, passes props to the slot
<template>
  <div
    v-for="(item, index) in data"
    :key="index"
  >
    <slot :data="item" :idx="index"> </slot>
  </div>
</template>

I need RowComponent to capture the props passed by grandchild but, apparently, whatever is passed by the parent takes effect and passing props in grandchild doesn't work.

How can I pass pass these props to my custom component at grandchild level (they are not known at the parent level)?

EDIT : updated component names

fnisi
  • 1,181
  • 1
  • 14
  • 24

1 Answers1

-1

Your code doesn't really make sense, If you think about it. You're not really passing anything to RowComponent.

I believe this is what you're looking for

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

Mostafa Said
  • 739
  • 2
  • 6
  • 20
  • I don't think scoped slots are what I need - the `data` object passed to ComponentA is then passed to ComponentB which passes it down to grandchild. The original `data` object is an array and `RowComponent` is used to render a single row of a table, which is an element in the array. What would I get if I have access to my array items at the parent scope? – fnisi Sep 07 '22 at 11:53