uni-app——uniapp实现循环插槽slot

效果：

子组件 Son.vue

<template>
  <view>
    <block v-for="(item, index) in list" :key="index">
      <view>{{ item.name }}</view>
      <slot :name="`content${index}`"></slot>
    </block>
  </view>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

vue 父组件 Father.vue

<template>
  <view>
    <Son :list="list">
      <!-- 自定义插槽内容 -->
      <view
        :slot="`content${index}`"
        v-for="(item, index) in list"
        :key="index"
      >
        <view>{{ item.content }}</view>
      </view>
    </Son>
  </view>
</template>
<script>
import Son from "./Son.vue";
export default {
  components: {
    Son,
  },
  data() {
    return {
      list: [
        { name: "名字1", content: "自定义插槽内容1" },
        { name: "名字2", content: "自定义插槽内容2" },
      ],
    };
  },
};
</script>

关键：slot 中 动态绑定 name