如何使用 v-for 将组件传递到孙子中的插槽

Question

我有一个父组件，它将数据传递到子组件，子组件将数据传递到孙组件中的插槽。子组件中的孙组件正在使用 v-for，我想为每个孙组件从父组件传递不同的数据。我怎样才能实现这个目标？

家长

<Parent>
  <Child>
    // I want to pass the different content for each Grandchild
  </Child>
</Parent>

孩子

<template>
  <div>
    <Grandchild v-for="(item, index) in items" :key="index">
      <template #default>
        <slot /> //I want to pass in different data
      </template>
    </Grandchild>
  </div>
</template>

孙子

<template>
  <details>
    <!-- @slot Default content for the answer -->
    <slot />
  </details>
</template>

Answer 1

在你的子组件中，你必须使用槽标签

示例：

您的子组件应该是，

<template>
   <div>
       <slot name="header"></slot>
   </div>
</template>

你的父组件应该是，

<template>
  <div>
    <Grandchild v-for="(item, index) in items" :key="index">
      <template slot="header">
        // Your codes
      </template>
    </Grandchild>
  </div>
</template>