vue3中的插槽

什么是插槽

插槽是组件中用来承载内容的一种机制，可以让组件在运行时接受来自其它组件的任意内容。可以将它理解为是在Vue组件中定义的占位符，用于指定在父组件中传递给子组件的内容的位置。它可以根据需要在父组件中动态地插入不同的内容，同时也可以接受子组件中传递下来的数据。
创建插槽
在vue的组件中，使用标签来定义插槽，我们先在components文件夹新建一个Product.vue组件，在Product组件中用插槽占位，代码如下

<template>
  <div>
    <h2>这是插槽之前的内容</h2>
      <slot></slot>
    <h3>这是插槽之后的内容</h3>
  </div>
</template>
<script setup>
</script>
<style scoped>
</style>

然后在APP.vue中引入组件Product.vue，并在标签中间用div填写要在Product.vue的插槽中显示的内容即可

<template>
  <div>
    <Product>
      <div>这里是从APP.vue填入Product组件slot中的内容</div>
    </Product>
  </div>
</template>
<script setup>
import Product from './components/Product.vue'
</script>

<style scoped>
</style>

运行，刷新浏览器，效果如下

插槽的类型

vue中提供的插槽有三种类型：默认插槽、具名插槽和作用域插槽。

默认插槽

默认插槽是最简单和常见的一种插槽。它允许组件接收任何未命名的内容，并将其作为组件的子元素插入。默认插槽通常在组件标签内部添加一个 slot 标签来声明，比如我们定义一个MyComponent.vue组件，其代码如下：

<template>
  <div>
    <slot></slot>
  </div>
</template>

当我们将组件在App.vue渲染时，任意内容都可以通过这个默认插槽插入组件中，如下所示：

<MyComponent>
  <h1>hello world</h1>
</MyComponent>

这里我们在App.vue中调用 MyComponent组件时，在 MyComponent标签内部添加了一个h1标签，里面填写了一段内容。这段内容将被注入到MyComponent.vue组件的 标签内。

具名插槽

具名插槽顾名思义就是带有名字的插槽，它允许开发者有选择地将内容插入到组件的某个具名插槽中。声明具名插槽非常简单，我们只需要在slot标签里加入一个特殊的属性：name，用来给各个插槽分配唯一的 ID，以确定每一处要渲染的内容。具名插槽像下面这样声明：

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

在上面的代码中，我声明了两个插槽：一个具名为 “header” 的插槽，和一个默认插槽。具名插槽可以像下面这样使用：
在父组件中使用 时，要为具名插槽传入内容，我们需要使用一个含 v-slot 指令的