Vue3 插槽的基础使用方法

Vue 3 中的插槽（Slot）是一种强大的机制，允许你在组件内部插入额外的内容，使组件更具灵活性。以下是使用插槽的基本方法：

1. 默认插槽：

   在组件模板中，使用<slot></slot>标签来表示默认插槽。任何未匹配到具名插槽的内容都会被放置在默认插槽中。

   vueCopy code
   <template>
     <div>
       <h1>这是一个组件</h1>
       <!-- 默认插槽 -->
       <slot></slot>
     </div>
   </template>
   

   插槽基础 - Vue 3 官方文档

2. 具名插槽：

   除了默认插槽，你还可以使用具名插槽来插入特定名称的内容。在组件模板中，使用 <slot name="slotName"></slot> 来定义一个具名插槽。在使用组件的地方，你可以为这些具名插槽提供内容，并使用 v-slot 指令指定插槽的名称。

   vueCopy code
   <template>
     <div>
       <h1>这是一个组件</h1>
       <!-- 默认插槽 -->
       <slot></slot>
       <!-- 具名插槽 -->
       <slot name="header"></slot>
       <slot name="footer"></slot>
     </div>
   </template>
   

   在使用组件的地方：

   vueCopy code
   <template>
     <my-component>
       <!-- 默认插槽的内容 -->
       <p>默认插槽的内容</p>
       <!-- 具名插槽的内容 -->
       <template v-slot:header>
         <h2>这是页头</h2>
       </template>
       <template v-slot:footer>
         <footer>这是页脚</footer>
       </template>
     </my-component>
   </template>
   

   具名插槽 - Vue 3 官方文档

3. 作用域插槽：

   作用域插槽允许你向插槽中传递数据，以便在插槽内容中使用。在组件模板中，使用 <slot> 元素的 v-slot 指令并指定参数名称，然后在插槽内容中使用该参数。

   vueCopy code
   <template>
     <div>
       <h1>这是一个组件</h1>
       <!-- 作用域插槽 -->
       <slot name="content" v-bind:item="item"></slot>
     </div>
   </template>
   

   在使用组件的地方，将数据传递给作用域插槽：

   vueCopy code
   <template>
     <my-component>
       <!-- 作用域插槽的内容 -->
       <template v-slot:content="slotProps">
         <p>{{ slotProps.item }}</p>
       </template>
     </my-component>
   </template>
   

在这个示例中，slotProps.item 可以访问作用域插槽传递的数据。

作用域插槽 - Vue 3 官方文档