vue3 slot的定义与使用

Vue3中的slot是用来插入组件内容的一种方式。它可以让父组件将自己的DOM结构传递给子组件，让子组件在指定位置插入自己的内容。

定义slot的方式如下：

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

这里的slot标签就是定义一个插槽，它的内容会被替换成父组件传递过来的内容。

使用slot的方式如下：

<template>
  <div>
    <slot>默认内容</slot>
  </div>
</template>

<template>
  <my-component>
    <h1>插入内容</h1>
  </my-component>
</template>

在这个例子中，my-component组件中的slot标签被替换成了父组件传递过来的h1标签。如果父组件没有传递内容，那么slot标签中的默认内容就会被显示出来。

除了默认插槽，Vue3还支持具名插槽和作用域插槽。具名插槽可以让父组件在多个插槽中选择一个进行传递内容，而作用域插槽则可以让子组件将自己的数据传递给父组件。