vue3获取slot实例

在Vue3中，获取slot实例的方式与Vue2有所不同。可以通过$slots属性获取所有插槽内容，然后通过v-for指令遍历所有插槽内容，并使用$refs属性获取每个插槽的实例。

例如，假设我们有以下组件：

<template>
  <div>
    <slot name="header" ref="headerSlot"></slot>
    <slot name="content" ref="contentSlot"></slot>
    <slot name="footer" ref="footerSlot"></slot>
  </div>
</template>

我们可以在组件内部使用$slots属性获取所有插槽内容，然后使用v-for指令遍历所有插槽，并使用$refs属性获取每个插槽的实例：

<script>
export default {
  mounted() {
    // 获取header插槽实例
    const headerSlot = this.$slots.header[0].$refs.headerSlot
    console.log(headerSlot)

    // 获取content插槽实例
    const contentSlot = this.$slots.content[0].$refs.contentSlot
    console.log(contentSlot)

    // 获取footer插槽实例
    const footerSlot = this.$slots.footer[0].$refs.footerSlot
    console.log(footerSlot)
  }
}
</script>

注意，如果插槽内容为空，$slots数组将为空数组，因此需要进行判断。此外，如果插槽内容不止一个，需要进行遍历。