Vue3使用道具将插槽从父级传递给孙级

Question

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

Answer 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