Vue.js 中的插槽（Slots）是Vue组件间进行内容传递的重要机制，用于在父组件中向子组件插入内容。以下是各类插槽的解释和用法：

1. 匿名插槽 / 默认插槽：

   • 当你在子组件中定义一个没有 name 属性的 <slot> 标签时，它就是一个匿名插槽或默认插槽。
   • 如果父组件没有明确指明要插入到哪个具名插槽，那么所有未分配的内容将自动填充到默认插槽中。

   <!-- 子组件 -->
   <template><div><slot>这是默认插槽的默认内容</slot></div>
   </template><!-- 父组件 -->
   <MyComponent><p>这段文本会插入到子组件的默认插槽中</p>
   </MyComponent>

2. 具名插槽：

   • 具名插槽允许你为特定区域定义名称，父组件可以按照名称将内容插入到子组件的不同位置。

   <!-- 子组件 -->
   <template><div><h2><slot name="header"></slot></h2><slot name="body"></slot><footer><slot name="footer"></slot></footer></div>
   </template><!-- 父组件 -->
   <MyComponent><template v-slot:header><h3>这是页头</h3></template><template v-slot:body><p>这是主体内容</p></template><template v-slot:footer><p>这是页脚</p></template>
   </MyComponent>

3. 作用域插槽（ Scoped Slots）：

   • 作用域插槽允许子组件向其插槽传递数据，让父组件可以在插槽内容中访问这些数据。
   • 在 Vue 2.x 中使用 slot-scope 特性实现，在 Vue 3.x 中使用 v-slot 指令及其参数语法实现。

   <!-- Vue 2.x -->
   <!-- 子组件 -->
   <template><ul><li v-for="item in items"><slot :item="item" slot-scope="{ item }">{{ item.text }}</slot></li></ul>
   </template><!-- 父组件 -->
   <MyListComponent><template slot="default" slot-scope="{ item }"><strong>{{ item.title }}</strong>: {{ item.description }}</template>
   </MyListComponent><!-- Vue 3.x -->
   <!-- 子组件 -->
   <script setup>
   const items = [/*...*/];
   </script>
   <template><ul><li v-for="item in items"><slot :item="item">{{ item.text }}</slot></li></ul>
   </template><!-- 父组件 -->
   <MyListComponent><template #default="{ item }"><strong>{{ item.title }}</strong>: {{ item.description }}</template>
   </MyListComponent>

4. 插槽默认值：

   • 子组件可以为其插槽定义默认内容，当父组件没有提供相应插槽内容时，这个默认内容将会被展示出来。
   • 在上面匿名插槽的例子中，“这是默认插槽的默认内容”就是默认值。

<!-- Vue 2.x -->
<!-- 子组件 -->
<template><ul><li v-for="item in items"><slot :item="item" slot-scope="{ item }">{{ item.text }}</slot></li></ul>
</template><!-- 父组件 -->
<MyListComponent><template slot="default" slot-scope="{ item }"><strong>{{ item.title }}</strong>: {{ item.description }}</template>
</MyListComponent><!-- Vue 3.x -->
<!-- 子组件 -->
<script setup>
const items = [/*...*/];
</script>
<template><ul><li v-for="item in items"><slot :item="item">{{ item.text }}</slot></li></ul>
</template><!-- 父组件 -->
<MyListComponent><template #default="{ item }"><strong>{{ item.title }}</strong>: {{ item.description }}</template>
</MyListComponent>​