vue3.2 父页面如何获取子组件的实例

在 Vue.js 3.2 或更高版本中，您可以使用 `ref` 属性在父组件中获取子组件的实例。

首先，在子组件中添加 `ref` 属性，并将其命名为一个合适的变量名，例如 `myComponent`：

<template>
  <div ref="myComponent">
    <!-- 子组件的模板代码 -->
  </div>
</template>

然后，在父组件中使用 `ref` 属性获取子组件的实例。在父组件的 `mounted` 生命周期钩子函数中，通过 `$refs` 对象访问子组件的实例：

<template>
  <div>
    <!-- 父组件的模板代码 -->
    <button @click="getComponentInstance">获取子组件实例</button>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$refs.myComponent.doSomething(); // 在父组件中调用子组件的方法
  },
  methods: {
    getComponentInstance() {
      const childComponent = this.$refs.myComponent;
      console.log(childComponent); // 打印子组件实例
    },
  },
}
</script>

上面的例子中，我们在父组件中使用 `$refs.myComponent` 访问子组件的实例。在 `getComponentInstance` 方法中，我们将子组件的实例赋值给一个变量 `childComponent`，并打印出来。您可以在这个方法中做任何您想要的事情，比如调用子组件的方法、监听子组件的事件，等等。