vue3 插槽中间级组件

Vue 3 中的插槽（Slots）是一种强大的功能，它允许你在组件模板内定义区域，供其他组件内容插入。中间级组件通常指的是那些在其模板结构中包含有插槽的组件，并且它们可以被父组件利用来进行定制化渲染。

当你在父组件中使用一个中间级组件时，可以在该组件定义的特定位置使用 `<slot>` 标签。例如：

<!-- 父组件 -->
<template>
  <custom-component>
    <!-- 这里就是插槽 -->
    <p>这是默认内容</p>
    <slot></slot> <!-- 子组件可以根据需要填充这里的内容 -->
  </custom-component>
</template>

然后在子组件 `custom-component.vue` 中：

<!-- 子组件 custom-component.vue -->
<template>
  <div>
    <h2>Custom Component</h2>
    <slot name="default">这是插槽区的默认文本</slot> <!-- 可选的 slot 名称 -->
    <slot></slot> <!-- 默认插槽，如果没有指定名称，则接收所有未命名插槽 -->
  </div>
</template>

在父组件中，你可以通过 `<custom-component>` 使用插槽传入自定义内容：

<custom-component>
  <p>我是插入到默认插槽的内容</p>
  <span slot="default">这是自定义插槽内容</span>
</custom-component>

这样，无论你传递什么样的内容到 `custom-component` 的插槽，它都能动态地改变其显示内容。