vue3 - 插槽 Slots的使用

虽然标题上是vue3的插槽使用，其实vue2也是一样的用法。没什么区别，只是案例上使用的是vue3的写法，会有些不同；

1，插槽使用的场景

我们知道子组件能够接收父组件任意类型的 js变量作为 props进行使用，那如果父组件想要传递给子组件 html标签、模板片段、甚至是一个组件呢，那么子组件应该怎么接收呢？

所以插槽的出现就可以解决上面的问题；插槽slots可以细化分为：默认内容、具名插槽、作用域插槽；

下面是图解：

其实就是把内容插入到子组件指定的预留位置，这个位置就是

2，默认内容插槽

在父元素没有提供任何内容的情况下，可以为插槽指定默认内容。比如有这样一个 SlotButton组件；

子组件 SlotButton.vue：

<script setup>
import { reactive, ref, createApp } from "vue";
</script>

<template>
  <button class="btn primary">
    <!-- 插槽出口 -->
    <slot>默认内容</slot>
  </button>  <br>
</template>

父组件中使用插槽：

<!-- 只传文本 -->
 <SlotButton> 我是插槽按钮 </SlotButton><br />

最终渲染的按钮如下：

如果父组件什么也不传，那么默认使用子组件插槽里面的默认内容：

 <SlotButton> </SlotButton><br />

如下：

也就是说父组件传入的内容会被 插入到子组件 的位置进行渲染，css样式尽量写在父组件中，子组件只做内容的展示即可；

那么我们现在只插入了text文本内容，那么 html标签以及组件也同样可以插入到插槽里面。下面的案例会讲到的；

3，具名插槽

有时在一个组件中会同时包含多个插槽，比如 header头部，body内容区，footer底部区，那样我们可以使用具名插槽来区分这些各个位置的插槽，也就是说给每个插槽都起一个名字用来规范。

见下面的案例：

点击按钮显示模态框，模态框里面的内容又分为头部插槽，内容区插槽，和底部插槽；

父组件代码：

<script setup>
import { reactive, ref, createApp } from "vue";
import SlotButton from "@/components/component/SlotButton.vue";
import Modal from "@/components/component/Modal.vue";//引入组件
let isShowModal = ref(false);//控制是否显示模态框
const showModal = () => {
  isShowModal.value = true;
};
const closeModal = () => {
  isShowModal.value = false;//点击OK关闭模态框
};
</script>
<template>
  <div class="slot">
  	主要内容：
    <Modal @close="closeModal" :show="isShowModal">
      <template #header><p class="title">我是标题</p> </template>
      <template v-slot:body><p class="body">我是内容</p></template>
      <template v-slot:footer><p class="footer">我是底部内容</p></template>
    </Modal>
  </div>
</template>
<style scoped lang="less">
.title {
  text-align: center;
  color: blue;
}
</style>

可以看出具名插槽在定义插槽入口的时候，我们需要使用一个含 v-slot 指令的