uniapp+ts+vue3使用插槽

作用域插槽

// 封装
<template>
  <div>
    <slot name="header" :message="message"></slot>
    <slot></slot>
  </div>
</template>

// 使用
<template>
  <div>
    <my-component>
      <template v-slot:header="{ message }">
        <h1>{{ message }}</h1>
      </template>
      <p>This is the default content</p>
    </my-component>
  </div>
</template>

具名插槽

// 封装
<template>
  <div>
    <header>
      <slot name="header">Default header</slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer">Default footer</slot>
    </footer>
  </div>
</template>

// 使用
<my-component>
  <template #header>
    <h1>Page header</h1>
  </template>
  <p>This is the main content.</p>
  <template #footer>
    <p>Page footer</p>
  </template>
</my-component>

默认插槽

// 封装
<template>
  <div>
    <slot></slot>
  </div>
</template>

// 使用
<template>
  <div>
    <my-component>
      <p>This content will be passed to the default slot</p>
    </my-component>
  </div>
</template>