默认插槽，具名插槽和作用域插槽分别写法

默认插槽：

<template>
  <div>
    <slot></slot>
  </div>
</template>

<my-component>
  <p>This will be inserted in the slot</p>
</my-component>

具名插槽：

<template>
  <div>
    <slot name="header"></slot>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<my-component>
  <template v-slot:header>
    <h1>Header content</h1>
  </template>
  <template v-slot:content>
    <p>Content goes here</p>
  </template>
  <template v-slot:footer>
    <footer>Footer content</footer>
  </template>
</my-component>

作用域插槽：

<template>
  <div>
    <slot v-for="item in items" :item="item"></slot>
  </div>
</template>

<my-component>
  <template v-slot:default="slotProps">
    <p>{{ slotProps.item }}</p>
  </template>
</my-component>