vue3中使用slot

在Vue3中，`slot` 是一种强大的功能，它允许组件的模板内容可复用，从而实现组件化的灵活布局和内容传递。`slot` 主要用于父组件向子组件传递数据或结构化内容。下面是关于 `slot` 的基本介绍：

1. **内容插槽（Default Slot）**：默认情况下，任何没有指定插槽的地方，子组件都会接收父组件提供的内容。这是最基础的使用方式。

   <template>
     <div>
       <!-- 这里是默认插槽 -->
       <slot></slot>
       <!-- 父组件的内容 -->
       <p>这是父组件的内容</p>
     </div>
   </template>

2. **命名插槽（Named Slots）**：如果需要针对特定情况提供不同的内容，可以定义命名插槽。在父组件的模板中，使用 `<slot>` 标签并指定一个名字。

   <template>
     <div>
       <!-- 定义一个名为"header"的插槽 -->
       <slot name="header"></slot>
       <!-- 定义另一个插槽 -->
       <slot name="content"></slot>
       <!-- 父组件的内容 -->
       <p>这是父组件的内容</p>
     </div>
   </template>

3. **父子组件通信**：子组件可以通过 `v-bind` 或 `v-slot` 将数据绑定到插槽中，这样父组件可以在需要的地方动态插入内容。

   <template>
     <ParentComponent>
       <template v-slot="{ item }">
         <ChildComponent :item="item" />
       </template>
     </ParentComponent>
   </template>