vue3中插槽的使用

在Vue 3中，插槽的使用方式与Vue 2有所不同。Vue 3中引入了新的组件声明方式，即使用`<script setup>`语法来定义组件。下面是Vue 3中插槽的使用方法：

1. 默认插槽：
在父组件中，可以使用`<slot>`标签来定义默认插槽。子组件中的内容将会被插入到父组件中的`<slot>`标签所在的位置。例如：

   <!-- ParentComponent.vue -->
   <template>
     <div>
       <slot></slot>
     </div>
   </template>

   <!-- ChildComponent.vue -->
   <template>
     <div>
       <h1>Child Component</h1>
       <p>This is the content of the child component.</p>
     </div>
   </template>

在父组件中使用子组件时，可以将子组件的内容放在父组件的标签内：

   <!-- App.vue -->
   <template>
     <div>
       <parent-component>
         <h2>Parent Component</h2>
         <p>This is the content of the parent component.</p>
       </parent-component>
     </div>
   </template>

运行后，父组件中的`<slot>`标签将会被子组件的内容替换。

2. 具名插槽：
在父组件中，可以使用`<slot>`标签的`name`属性来定义具名插槽。子组件中的内容可以通过`<template v-slot:插槽名>`或`<template #插槽名>`来指定插入到具名插槽中。例如：

   <!-- ParentComponent.vue -->
   <template>
     <div>
       <slot name="header"></slot>
       <slot></slot>
     </div>
   </template>

   <!-- ChildComponent.vue -->
   <template>
     <div>
       <template v-slot:header>
         <h1>Header</h1>
       </template>
       <h2>Child Component</h2>
       <p>This is the content of the child component.</p>
     </div>
   </template>

在父组件中使用子组件时，可以使用`<template v-slot:插槽名>`或`<template #插槽名>`来指定具名插槽的内容：

   <!-- App.vue -->
   <template>
     <div>
       <parent-component>
         <template v-slot:header>
           <h2>Parent Component Header</h2>
         </template>
         <h3>Parent Component</h3>
         <p>This is the content of the parent component.</p>
       </parent-component>
     </div>
   </template>

运行后，父组件中的`<slot name="header">`标签将会被子组件的具名插槽内容替换。

3. 作用域插槽：
在Vue 3中，作用域插槽被称为"带有参数的插槽"。父组件可以通过在`<slot>`标签上使用`v-slot:参数名`或`#参数名`来接收子组件传递的数据。例如：

   <!-- ParentComponent.vue -->
   <template>
     <div>
       <slot name="header" v-bind:user="user"></slot>
     </div>
   </template>

   <!-- ChildComponent.vue -->
   <template>
     <div>
       <template v-slot:header="slotProps">
         <h1>{{ slotProps.user.name }}</h1>
       </template>
       <h2>Child Component</h2>
       <p>This is the content of the child component.</p>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         user: {
           name: 'John',
           age: 25
         }
       };
     }
   };
   </script>

在父组件中使用子组件时，可以通过`v-slot:参数名`或`#参数名`来接收子组件传递的数据：

   <!-- App.vue -->
   <template>
     <div>
       <parent-component>
         <template v-slot:header="slotProps">
           <h2>{{ slotProps.user.name }} - {{ slotProps.user.age }}</h2>
         </template>
         <h3>Parent Component</h3>
         <p>This is the content of the parent component.</p>
       </parent-component>
     </div>
   </template>

运行后，父组件中的`<slot name="header" v-bind:user="user">`标签将会被子组件的作用域插槽内容替换，并且可以访问子组件传递的数据。