在 vue 3 中，可以通过以下几种方式获取组件实例对象：通过 emit 的回调函数通过 provide/inject通过 findref

如何获取 Vue 3 组件实例对象

在 Vue 3 中，获取组件实例对象有多种方法：

1. 通过 emit 的回调函数

当组件触发一个自定义事件时，可以使用 emitted 选项中的回调函数来获取组件实例。

立即学习“前端免费学习笔记（深入）”；

<template><div>
    <button>Emit Test</button>
  </div>
</template><script>
export default {
  emits: ['test'],
  methods: {
    emitTest() {
      this.$emit('test', this);
    }
  }
}
</script>

在父组件中，可以使用监听自定义事件的方法来获取组件实例：

<script>
export default {
  setup() {
    const emitTest = (e) => {
      // e 是组件实例对象
      console.log(e);
    };

    return {
      emitTest,
    };
  },
}
</script>

2. 通过 provide/inject

如果父组件提供了某个值，子组件可以通过 inject 函数来获取该值，还可以获取 provide 对象，该对象包含父组件实例。

// 父组件
<template><div>
    <provide-to-all v-slot="{ provide }"><my-component v-bind="provide"></my-component></provide-to-all>
</div>
</template><script>
export default {
  provide() {
    return {
      msg: 'Hello from parent'
    };
  }
}
</script>

// 子组件
<template><div>
    {{ provide.msg }}
    {{ provide.$parent }}
  </div>
</template><script>
export default {
  inject: ['provide'],
}
</script>

3. 通过 findRef

如果组件使用 ref 属性，可以通过 ref 属性来获取组件实例。

<template><div>
    <my-component ref="myComponent"></my-component>
</div>
</template><script>
export default {
  mounted() {
    console.log(this.$refs.myComponent);
  }
}
</script>