vue3 插槽使用详解

1 前言

Vue 实现了一套内容分发的 API，将 元素作为承载分发内容的出口，使用插槽使得vue组件的设计更加灵活。

在vue版本更迭中，尽管插槽的使用语法有部分变化，插槽的核心用法并未改变，鉴于vue2将在2023年第不再维护，以下我们将围绕vue3对插槽的具体使用方法进行展开。

2 插槽的使用

2.1 基本使用

当子组件中使用slot声明一个插槽出口API后，父组件在使用子组件时，可以选择将父组件内容渲染到子组件插槽部分，也可以选择不做渲染。

若父组件没有提供插槽内容，则不会渲染，子组件会使用其本身的默认内容进行页面渲染。我们来看如下示例：

子组件：SlotsComponent.vue

<template>
  <div class="red-text">
    <slot>
      子组件插槽
    slot>
  div>
template>
<style scoped>
.red-text {
  color: red;
}
style>

父组件：index.vue

<template>
  <div>
    <label>父组件label>
    <SlotComponent>SlotComponent>
  div>
template>
<script>
import SlotComponent from "./component/SlotsComponent";
export default {
  components: {
    SlotComponent
  }
};
script>

渲染结果如下：

我们可以看到这个时候页面渲染的是子组件默认的内容。

再看父组件提供插槽内容的情况，子组件代码不变，父组件代码如下：

<template>
  <div>
    <label>父组件label>
    <SlotComponent>
      父组件使用子组件插槽
    SlotComponent>
  div>
template>
<script>
import SlotComponent from "./component/SlotsComponent";
export default {
  components: {
    SlotComponent
  }
};
script>

渲染结果如下：

我们可以看到子组件插槽部分被父组件使用的插槽内容替换。以上是插槽的基本使用。

2.2 具名插槽

具名插槽，顾名思义，就是具有名称的插槽，在项目日常开发规范中，一搬公司都会要求使用具名插槽，以变后续组件的扩展和增强代码的可读性。

其次，若我们需要在子组件中声明多个插槽出口，也必须使用具名插槽，用于区分父组件的使用，具名插槽就是利用slot的name属性给插槽命名，父组件中使用v-slot:slotName来使用对应的插槽。

以下我们来看一下具名插槽的使用：

子组件：SlotsComponent.vue

<template>
  <div class="red-text">
    <header>
      <slot name="header">
        
      slot>
    header>
    <main>
      <slot name="main">
        
      slot>
    main>
    <footer>
      <slot name="footer">
        
      slot>
    footer>
  div>
template>
<script>
export default {};
script>
<style scoped>
.red-text {
  color: red;
}
style>

父组件：index.vue

<template>
  <div>
    <label>父组件label>
    <SlotComponent>
      <template v-slot:header>
        我是头
      template>
      <template v-slot:footer>
        我是底
      template>
    SlotComponent>
  div>
template>
<script>
import SlotComponent from "./component/SlotsComponent";
export default {
  components: {
    SlotComponent
  }
};
script>

渲染结果如下：

我们可以看到渲染结果如上。通过该渲染结果，我们也知道若子组件声明了具名插槽，但是父组件使用。则不会在页面渲染（除非有默认值）。出自之外还有以下几个注意点：

1. 若存在多个插槽，部分有名称，部分无名称，则无名插槽使用方法同2.1；
2. vue3语法有所改变，使用具名插槽必须使用