Vue 3 组合式 API 获取 Slot 实例

在 Vue 3 中，可以使用 useSlots 组合式 API 来获取组件的 slot 实例。这个 API 会返回一个对象，该对象的属性名对应了组件的 slot 名称，属性值为该 slot 实例的渲染函数。

具体使用方法如下：

在组件中引入 useSlots：

import { useSlots } from 'vue';

在组合式 API 中使用 useSlots：

export default {
  setup() {
    const slots = useSlots();

    // 打印组件的 slot 实例
    console.log(slots);

    return {
      // ...
    }
  }
}

在模板中使用 slot 实例：

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

<template>
  <div>
    <!-- 使用 slot 实例 -->
    <div class='header'>
      {{ slots.header() }}
    </div>

    <div class='content'>
      {{ slots.content() }}
    </div>

    <div class='footer'>
      {{ slots.footer() }}
    </div>
  </div>
</template>

在模板中，使用 slots.[slot名称]() 的方式来调用对应的 slot 实例。例如，slots.header() 表示调用组件中名为 header 的 slot 实例。