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

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

区分方法

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