Vue-插槽（Slots）

1. 介绍

在Vue.js中，插槽是一种强大的功能，它允许你创建可重用的模板，并在使用该模板的多个地方插入自定义内容。

插槽为你提供了一种方式，可以在父组件中定义一些“插槽”，然后在子组件中使用这些插槽，插入自己的内容。

2. 插槽的分类

2.1 默认插槽（Default Slots）

这是最常见的插槽类型。如果你在一个组件模板中定义一个slot素，那么这个元素将被视为默认插槽的内容。

使用场景：只需要传入一个结构

案例：

• 子组件（ChildComponent.vue）：

<template>  
  <div>  
    <slot>默认内容</slot> <!-- 默认插槽 --> <!-- 里面可以包含默认内容，父组价没有传递，就展示默认内容 --> 
  </div>  
</template>

• 父组件（ParentComponent.vue）

<template>  
  <ChildComponent>  
    <p>这是插入到默认插槽的内容</p>  <!-- 没有就展示子组件的默认内容，这里：可以为任意的html内容 --> 
  </ChildComponent>  
</template>

2.2 具名插槽（Named Slots）

具名插槽允许你在父组件中为子组件的特定部分提供内容。你可以通过在子组件的模板中添加slot标签，并为其指定一个名字，来定义具名插槽。

使用场景：一个组件内有多处结构，需要外部传入标签，进行定制 。

案例：

• 子组件（ChildComponent.vue）

<template>  
  <div>  
    <slot name="header"></slot> <!-- 具名插槽 name="header"-->  
    <slot name="footer"></slot> <!-- 具名插槽 name="footer" -->  
  </div>  
</template>

• 父组件（ParentComponent.vue）

<template>  
  <ChildComponent>  
    <template v-slot:header> <!-- 指定要插入到具名插槽的内容 -->  <!-- 这里的v-slot:可以替换为 # -->  
      <h1>这是头部内容</h1>  
    </template>  
    <template #footer> <!-- 指定要插入到具名插槽的内容 -->  
      <p>这是底部内容</p>  
    </template>  
  </ChildComponent>  
</template>

注：v-slot:可以替换为 #，方便进行简写

2.3 作用域插槽（Scoped Slots）

作用域插槽是一种特殊的具名插槽，它允许你访问子组件的数据和方法。通过作用域插槽，你可以在父组件中操作子组件的数据。

使用场景：封装表格组件

基本使用步骤：

1. 给 slot 标签, 以 添加属性的方式传值

<slot :id="item.id" msg="测试文本"></slot>

2. 所有添加的属性, 都会被收集到一个对象中

{ id: 3, msg: '测试文本' }

3. 在template中, 通过 #插槽名= "obj" 接收，并使用，默认插槽名为 default

<MyTable :list="list">
  <template #default="obj">
    <button @click="del(obj.id)">删除</button>
  </template>
</MyTable>

案例：

需求：假设我们有一个子组件ListComponent，它包含一个列表，并且我们希望在父组件中自定义每个列表项的内容。我们可以使用作用域插槽来实现这个需求。

• 子组件（ListComponent.vue）

<template>  
  <ul>  
    <li v-for="item in items" :key="item.id">  
      <slot name="item" :item="item"></slot> <!-- 作用域插槽 -->  
    </li>  
  </ul>  
</template>

• 父组件（ParentComponent.vue）

<template>  
  <ListComponent :items="items"> <!-- 将数据传递给子组件 -->  
    <template #item="{ item }"> <!-- 访问子组件的数据  这里使用了 js的对象解析-->  
      <p>{{ item.name }}</p> <!-- 使用子组件的数据 -->  
      <p>{{ item.description }}</p> <!-- 使用子组件的数据 -->  
    </template>  
  </ListComponent>  
</template>