vue3 v-for 使用插槽渲染特殊的元素

Index.vue:

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import List from './List.vue'

let list: any = ref([
  {
    id: '1',
    name: '1'
  },
  {
    id: '2',
    name: '2'
  },
  {
    id: '3',
    name: '3',
    type: 'custom',
    vm: 'user'
  }
])

onMounted(() => {})
</script>

<template>
  <div>
    <List :list="list">
      <template #user="scope">
        <div style="color: red">自定义{{ scope.item.name }}</div>
      </template>
    </List>
  </div>
</template>

List.vue:

<script setup lang="ts">
import { onMounted, ref, defineProps } from 'vue'
defineProps({
  list: {
    type: Array
  }
})

onMounted(() => {})
</script>

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      <span v-if="item.type !== 'custom'">{{ item.name }}</span>
      <span v-if="item.type === 'custom'">
        <slot :name="item.vm" :item="item"></slot>
      </span>
    </div>
  </div>
</template>