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>   
  ChildComponent>  
template>

2.2 具名插槽（Named Slots）

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

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

案例：

• 子组件（ChildComponent.vue）

<template>  
  <div>  
    <slot name="header">slot>   
    <slot name="footer">slot>   
  div>  
template>

• 父组件（ParentComponent.vue）

<template>  
  <ChildComponent>  
    <template v-slot:header>     
      <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 }">   
      <p>{{ item.name }}p>   
      <p>{{ item.description }}p>   
    template>  
  ListComponent>  
template>