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

Posted

技术标签:

【中文标题】如何使组件使用 v-for 具有动态插槽【英文标题】:How to make a component use v-for have dynamic slots 【发布时间】:2019-11-08 21:25:09 【问题描述】:

我有一个使用 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,例如图像,而另一个项目可能会做一些完全不同的事情。

【问题讨论】:

【参考方案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 具有动态插槽的主要内容,如果未能解决你的问题,请参考以下文章

为什么我在v-for的插槽中只有一个元素?

56-61 组件插槽动态组件,异步组件

Vue动态组件 & 插槽 & 自定义指令

Vue使用v-for时动态绑定ref(v-for组件内使用ref)

九动态组件与插槽

九动态组件与插槽