具名/匿名/作用域插槽区分

总是忘记具名/匿名/作用域插槽区别，特此记录

区分方法

看名称：具名插槽有名称，匿名插槽没有。
看内容：作用域插槽允许父组件访问子组件的数据，并通过插槽模板来展示这些数据。
看用法 ：匿名插槽和具名插槽都是通过 <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`