Vue3 组件实例获取方法详解

在 Vue 3 中，获取组件实例的方法有两种：

使用'ref'函数：在组件的'setup'函数中，可以使用'ref'函数将组件实例存储在一个变量中，然后可以通过该变量来访问组件实例。

import { ref } from 'vue';

export default {
  setup() {
    const myComponent = ref(null);

    // 在组件挂载后，将组件实例赋值给myComponent
    onMounted(() => {
      myComponent.value = this;
    });

    return {
      myComponent
    };
  }
}

然后可以在模板中使用'myComponent'来访问组件实例：

<template>
  <div>
    <button @click="myComponent.someMethod()">调用组件方法</button>
  </div>
</template>

使用'inject'函数：在父组件中，可以使用'provide'函数提供组件实例，然后在子组件中使用'inject'函数获取组件实例。

// 父组件
import { provide, ref } from 'vue';

export default {
  setup() {
    const myComponent = ref(null);

    // 在组件挂载后，将组件实例赋值给myComponent
    onMounted(() => {
      myComponent.value = this;
    });

    provide('myComponent', myComponent);

    return {
      myComponent
    };
  }
}

// 子组件
import { inject } from 'vue';

export default {
  setup() {
    const myComponent = inject('myComponent');

    return {
      myComponent
    };
  }
}

然后可以在子组件中使用'myComponent'来访问父组件的组件实例。