vue3 v-for使用插槽

Vue3中的`v-for`指令是一个非常强大的循环渲染工具，它允许你在列表中插入动态内容。当配合`slot`（插槽）一起使用时，可以让你在模板的不同部分复用内容，并提供更细粒度的控制。

插槽的概念在Vue中主要用于组件化设计，通过定义特殊的`<template>`标签作为插槽，可以在父组件内部或外部传递自定义的内容。在`v-for`中，我们通常会在每个循环实例上创建一个插槽标签，例如：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        <slot name="default">{{ item.text }}</slot> <!-- 默认插槽 -->
        <slot name="extra">更多关于{{ item.name }}的信息</slot> <!-- 可选插槽 -->
      </li>
    </ul>
  </div>
</template>

在父组件中，你可以这样使用这个带有插槽的组件：

<my-component>
  <template #default>这是默认展示的内容</template>
  <template #extra>还有额外的数据描述</template>
  <li each-item="item">...</li>
</my-component>

这里的`#default`和`#extra`是插槽的名字，`each-item`是对`v-for`的别名。这样，每个循环的`li`元素都会接收并显示来自父组件提供的默认和额外信息。