vue slot 可选

Vue的slot（插槽）是一种组件内部的占位符，用于动态地插入内容。当一个组件接收另一个组件作为其一部分时，就可以通过slot来传递自定义的内容。Vue的slot有三种类型：默认slot、命名slot和具名slot。

1. 默认slot（非命名slot）：如果没有指定其他slot，那么所有的内容都会被放在默认slot中。这是最基础的使用情况，当你想让父组件传递一些通用的数据给子组件时，通常会使用默认slot。

2. 命名slot：开发者可以为slot命名，以便更精确地控制插入的内容。通过`:slot="name"`在父组件中引用，或者`<slot name="name">...</slot>`在子组件中定义，这样可以按需选择插入哪个命名slot的内容。

3. 具名slot：是最灵活的一种slot，允许你在插槽标签上直接绑定数据，这叫做具名插槽。它们通常配合`v-bind:key`一起使用，以保证实例之间的复用和正确的插入顺序。

例如，一个简单的父组件可能像这样使用slot：

<template>
  <my-component>
    <span slot="default">这是默认内容</span>
    <p slot="custom">这是自定义内容</p>
  </my-component>
</template>

而子组件可能接受这些slot并渲染相应的内容：

<template>
  <div>
    <!-- 插入默认slot的内容 -->
    <slot></slot>

    <!-- 如果接收到名为custom的slot，就插入它的内容 -->
    <slot name="custom"></slot>
  </div>
</template>