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

Question

我正在尝试使用在子组件中计算的道具将自定义组件作为插槽从父组件传递给孙子组件。

孙子组件中有一个v-for循环，最终传递给它的组件从孙子组件中获取道具。 这些道具在自定义组件的模板中是可选的，只有自定义组件被传递给父组件，而没有任何道具被传递给父组件。

// 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>

我需要RowComponent来捕获孙子传递的道具，但是显然，父母传递的任何东西都会生效，并且在孙子中传递道具不起作用。

如何将这些道具传递给孙级的自定义组件（它们在父级不知道）？

编辑：更新的组件名称

Answer 1

如果您考虑一下，您的代码实际上没有意义。 您并没有真正将任何东西传递给RowComponent 。

我相信这就是你要找的

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