总是忘记具名/匿名/作用域插槽区别，特此记录
区分方法
- 看名称：具名插槽有名称，匿名插槽没有。
- 看内容：作用域插槽允许父组件访问子组件的数据，并通过插槽模板来展示这些数据。
- 看用法 ：匿名插槽和具名插槽都是通过
<slot>标签在子组件中定义的，而作用域插槽则是通过v-bind或:在<slot>标签上绑定数据，并在父组件中通过slot-scope或v-slot来接收这些数据。 - 看传向：具名/匿名插槽 -- 父传子 ；作用域插槽 -- 子传父
匿名插槽（Default Slots）
-
特点：没有指定名称的插槽。
-
用法 ：在子组件中使用一个单独的
<slot>标签作为内容插入点。在父组件中，任何没有被包裹在具名<template>标签中的内容都会被插入到这个匿名插槽中。 -
示例 ：
vue`<!-- 子组件 --> <template> <div> <slot></slot> <!-- 匿名插槽 --> </div> </template> <!-- 父组件 --> <ChildComponent> <p>这是默认内容，会插入到匿名插槽中</p> </ChildComponent>`
具名插槽（Named Slots）
-
特点：具有指定名称的插槽。
-
用法 ：在子组件中使用多个
<slot>标签，并通过name属性给它们命名。在父组件中，使用<template>标签包裹要插入的内容，并通过slot或v-slot:name属性来指定插槽的名称。 -
示例 ：
vue`<!-- 子组件 --> <template> <div> <slot name="header"></slot> <slot name="footer"></slot> </div> </template> <!-- 父组件 --> <ChildComponent> <template v-slot:header> <p>这是头部内容</p> </template> <template v-slot:footer> <p>这是底部内容</p> </template> </ChildComponent>`
作用域插槽（Scoped Slots）
-
特点：允许父组件访问子组件的数据。
-
用法 ：在子组件的
<slot>标签上使用v-bind或简写:来绑定要传递给父组件的数据。在父组件中，通过slot-scope（Vue 2.x）或v-slot（Vue 3.x）属性来接收这些数据，并在插槽的模板中使用它们。 -
Vue 2.x 示例 ：
vue`<!-- 子组件 --> <template> <div> <slot :items="myItems"></slot> </div> </template> <!-- 父组件 --> <ChildComponent> <template slot-scope="scope"> <ul> <li v-for="item in scope.items" :key="item">{``{ item }}</li> </ul> </template> </ChildComponent>` -
Vue 3.x 示例 （使用
v-slot）：vue`<!-- 父组件 --> <ChildComponent> <template v-slot:default="{ items }"> <ul> <li v-for="item in items" :key="item">{``{ item }}</li> </ul> </template> </ChildComponent`