uniapp v-for中如何使用插槽实现动态内容渲染

在uniapp中使用v-for循环渲染列表时，如何在每个循环项中通过插槽动态插入不同的内容？比如我有一个商品列表，每个商品需要展示不同的自定义模块（如促销标签、会员图标等），尝试过在v-for内直接写slot但无法区分不同项的内容。请问具体应该如何实现这种动态插槽的绑定？是否需要配合作用域插槽或其他特殊写法？最好能提供示例代码说明。

2 回复

在uniapp的v-for中，使用插槽实现动态内容渲染，可以在循环组件内定义具名插槽，通过slot-scope接收数据。例如：

<template v-for="(item, index) in list">
  <view>
    <slot name="content" :item="item" :index="index"></slot>
  </view>
</template>

使用时：

<my-component>
  <template v-slot:content="slotProps">
    <text>{{ slotProps.item.name }}</text>
  </template>
</my-component>

这样就能在循环中动态渲染插槽内容。


在 UniApp 中，你可以结合 v-for 和插槽（slot）实现动态内容的灵活渲染，常用于列表项中自定义不同内容。以下是具体方法：

1. 基础用法

在父组件中，使用 v-for 循环数据，并通过插槽传递动态内容到子组件。

子组件（child.vue）：

<template>
  <view>
    <slot :item="item"></slot>
  </view>
</template>

<script>
export default {
  props: ['item']
}
</script>

父组件（parent.vue）：

<template>
  <view>
    <child v-for="(item, index) in list" :key="index" :item="item">
      <template v-slot="{ item }">
        <text>{{ item.name }}</text>
      </template>
    </child>
  </view>
</template>

<script>
import child from '@/components/child.vue'
export default {
  components: { child },
  data() {
    return {
      list: [{ name: 'A' }, { name: 'B' }]
    }
  }
}
</script>

2. 使用具名插槽

若需多个插槽，可通过具名插槽区分不同渲染区域。

子组件：

<template>
  <view>
    <slot name="header" :item="item"></slot>
    <slot name="content" :item="item"></slot>
  </view>
</template>

父组件：

<child v-for="(item, index) in list" :key="index" :item="item">
  <template v-slot:header="{ item }">
    <text>标题：{{ item.title }}</text>
  </template>
  <template v-slot:content="{ item }">
    <text>内容：{{ item.desc }}</text>
  </template>
</child>

3. 作用域插槽传递多个参数

通过解构语法传递多个数据：

<template v-slot="{ item, index }">
  <text>{{ index }}: {{ item.name }}</text>
</template>

注意事项：

  • 确保 v-for 的 key 唯一，提升渲染性能。
  • 插槽内容在父组件中编译，可访问父组件数据。

通过以上方法，即可在 UniApp 中利用插槽灵活渲染动态内容。

回到顶部