Vue – Slot 插槽基本应用

简介

插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的 部分定义为插槽

可以把插槽认为是组件封装期间，为用户预留的内容的占位符

基本使用

在封装组件时，可以通过 <slot> 元素定义插槽，从而为用户预留内容占位符。

简写

v-slot 也和 v-bind 或 v-on 都有简写方式，用 # 号代表

<template #slotFoo>
  <p>xxxxx</p>
</template>

默认内容

当父组件中没有传入 slot 内容时，可以设置 slot 的默认内容，官方叫 后备内容

<slot name="slotFoo">
  <p>这是 slot 默认内容</p>
</slot>

命名使用

Vue官方规定，每一个 slot 插槽，都要有一个 name 名称

如果省略了，slot 的 name 属性，则有一个默认名称叫做 default

<slot name="default"></slot>

注意：如果 slot 设置自定义名称，在使用的时候，只可声明在 组件 元素，或 template 元素

子组件中设置 slot 自定义名称

<slot name="slotFoo"></slot>

以下两种方法可以使用：

<template v-slot:slotFoo>
  <p>xxxxx</p>
</template>

<Left v-slot:slotFoo>
  <p>xxxxx</p>
</Left>

以下情况不可使用

<Left>
  <p v-slot:slotFoo>xxxxx</p>
</Left>