Vue插槽（slot）及其用法详解

什么是slot插槽?

Vue中的插槽（slot）是一项非常重要的功能，它可以提高组件的可复用性，让父组件向子组件中插入内容。插槽分为具名插槽和默认插槽，还可以使用作用域插槽和v-slot指令来实现更加灵活的插槽功能。掌握Vue的插槽用法，可以让开发者更好地实现组件复用和代码拆分。

具名插槽

具名插槽通过 slot 组件中的 name 属性来定义，可以在父组件中通过 template 属性来使用。

子组件代码

<template>
  <div>
    <h2>我是子组件</h2>
    <slot name="content"></slot> <!-- content 为插槽名 -->
  </div>
</template>

父组件代码

<template>
  <div>
    <h2>我是父组件</h2>
    <my-component>
      <div slot="content"> <!-- content 为插槽名 -->
        <p>我是插入的内容</p>
      </div>
    </my-component>
  </div>
</template>

解释:

在子组件中定义了一个名为 content 的插槽，父组件中通过 template 添加了一个 div 标签，将其slot属性设置为 content，即插入了 p 标签这个插槽的内容。

默认插槽

默认插槽不需要定义 name 属性，只需要在 slot 组件中添加需要插入的内容即可。

子组件代码

<template>
  <div>
    <h2>我是子组件</h2>
    <slot></slot>
  </div>
</template>

父组件代码

<template>
  <div>
    <h2>我是父组件</h2>
    <my-component>
      <p>我是插入的内容</p>
    </my-component>
  </div>
</template>

解释:

在子组件中定义了一个默认插槽，即不需要设置 name 属性，父组件中直接将 p 标签插入到组件中，即实现了默认插槽的功能。

作用域插槽

什么是作用域插槽?

将子组件中的数据，在父组件中插槽标签上使用

第一步:在子组件中定义数据,以属性方式声明数据

<slot name="header" :un="username" :age="age">默认值</slot>

  data(){
        return {
            username:'六思逸',
            age:18,
        }
    }

第二步:在父组件中调用子组件时，可以通过作用域插槽使用数据

<h1 slot="header" slot-scope="scope">姓名：{{scope.un}}，年龄：{{scope.age}}</h1>

v-slot指令

什么是v-slot指令?

v-slot 指令是 Vue.js 2.6.0 新增的一个指令，用于在组件中声明和使用插槽，它是作用域插槽的语法糖。

v-slot指令

    <template v-slot:header="scope">
        <h1>姓名：{{scope.un}}，年龄：{{scope.age}}岁</h1>
    </template>

v-slot指令可以缩写成:

     <template #header="scope">
         <h1>姓名：{{scope.un}}，年龄：{{scope.age}}岁</h1>
     </template>