VueJS 之插槽

参考

项目	描述
搜索引擎	Bing
哔哩哔哩	黑马程序员
VueJS 官方文档	插槽 Slots

描述

项目	描述
Edge	109.0.1518.70 (正式版本) (64 位)
操作系统	Windows 10 专业版
@vue/cli	5.0.8
npm	8.19.3
VueJS	2.6.14

插槽

在对组件进行封装时，我们可能需要提供一个接口，使得组件的使用者可以向该组件提供模板或其他组件以供当前组件使用，而这个接口就是插槽。

你可以通过为组件提供一个 slot 元素来设置插槽，组件的使用者在向组件提供内容后，内容将取代组件中的 slot 元素。

举个栗子

App.vue

<template>
  <div class="container">
    <Extend>
      
      <button>Click Mebutton>
    Extend>
  div>
template>

<script>
// 导入组件
import Extend from '@/components/Extend.vue';

export default {
  components: {
    // 注册组件
    Extend
  }
}
script>

<style>

style>

Extend.vue

<template>
  <div class="container">
    <h3>请向本组件传递一个按钮，我们将会使它居中显示。h3>
    <div class="box">
      
      <slot>slot>
    div>
  div>
template>

<script>
export default {

}
script>

// 为防止出现样式冲突问题，为 style
// 添加 scoped 属性。
<style scoped>
.box{
  width: 300px;
  height: 300px;
  background-color: dodgerblue;
  /* 通过 CSS 的 FlexBox 使得 .box 中的元素居中显示 */
  display: flex;
  justify-content: center;
  align-items: center;
}
style>

执行效果：

可以看到在向组件 Extend 提供了 button 元素后，button 元素被子组件 Extend.vue 接收并使其取代了 slot 元素。

注：

你可以向组件元素提供多个元素或组件，它们将作为一个整体替代子组件中的内容。

默认内容

在父组件未提供任何内容时，你可能希望使用默认内容来代替子组件中的 slot 元素。为此，你可以向 slot 元素内部添加内容，这部分内容将作为插槽的默认内容。

举个栗子

App.vue

<template>
  <div class="container">
    <Extend>Extend>
  div>
template>

<script>
// 导入组件
import Extend from '@/components/Extend.vue';

export default {
  components: {
    // 注册组件
    Extend
  }
}
script>

<style>

style>

Extend.vue

<template>
  <div class="container">
    <h3>请向本组件传递一个按钮，我们将会使它居中显示。h3>
    <div class="box">
      
      <slot>
        
        <button>Default Buttonbutton>
      slot>
    div>
  div>
template>

<script>
export default {

}
script>

// 为防止出现样式冲突问题，为 style
// 添加 scoped 属性。
<style scoped>
.box{
  width: 300px;
  height: 300px;
  background-color: dodgerblue;
  /* 通过 CSS 的 FlexBox 使得 .box 中的元素居中显示 */
  display: flex;
  justify-content: center;
  align-items: center;
}
style>

执行效果：

由于父组件 App.vue 并没有向子组件提供任何内容，因此子组件中的插槽将使用默认内容。

具名插槽

当你需要在组件中预留多个插槽并且为这些插槽分配不同的内容时，你可以为这些插槽命名。在为插槽命名后，你可以通过插槽的名称向对应的插槽提供内容。这些带有名称的插槽就叫做具名插槽。

命名

如果你需要为插槽命名，你可以为 slot 元素设置 name 属性，并通过为该属性提供属性值来为该插槽提供名称。

指定插槽

VueJS 提供了内置指令 v-slot，你可以通过该元素指定需要使用到的插槽。该指令仅能使用在 组件元素 或 template 元素中，否则 VueJS 将抛出错误信息，在错误想象中，你可以观察到如下内容：

v-slot can only be used on components or