在 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>