Question

我有一个使用v-for的子组件。我希望能够让父项传递一个插槽，或类似的方式让其希望v-for显示中的每个项目。但是，问题在于，父级在呈现时无法访问v-for中的每个单独项目。

我尝试过的某些事情是传递带有特定键的插槽。例如

<child-comp :items="items">
    <div v-text="item.text" slot="body"/>
</child-comp>

我尝试的基本代码可能看起来像这样（尽管不起作用）

父组件看起来像

<template>
   <child-comp :items="items>
     <div v-text="item.text"
    </child-comp>
</template>
items = [{ text: 'hello'}]

孩子看起来像这样

<template>
  <div>
     <span v-for="item in items">
       <slot></slot>
     </span>
  </div>
</template>

请注意，这必须是动态的，因为一项可能执行v-text，另一项可能执行诸如添加更多html之类的操作（例如图像），而另一项可能执行完全不同的操作。

Answer 1

我相信您正在寻找范围内的广告位。

https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots

请注意，在Vue 2.6.0中更改了使用作用域插槽的首选语法，因此确切的编写方式取决于您使用的版本。

您的孩子会将item传递到广告位，就像这样：

<template>
  <div>
    <span v-for="item in items">
      <slot :item="item"></slot>
    </span>
  </div>
</template>

对于Vue 2.6.0+，父级看起来像这样：

<template>
  <child-comp :items="items">
    <template v-slot:default="slotProps">
      <!-- The parent can put whatever it needs here -->
      {{ slotProps.item }}
    </template>
  </template>
  </child-comp>
</template>

孩子传递到插槽的任何道具都将包含在slotProps中。无需将其称为slotProps，实际上，它通常是经过重构的（有关更多详细信息，请参阅文档）。

对于Vue 2.5，您应该改用slot-scope：

<template>
  <child-comp :items="items">
    <template slot-scope="slotProps">
      <!-- The parent can put whatever it needs here -->
      {{ slotProps.item }}
    </template>
  </template>
  </child-comp>
</template>

在Vue 2.5.0之前slot-scope被称为scope。

如何使组件使用v-for具有动态插槽

1 个答案: