vue3暴露子组件的实例给父组件让父组件能够使用子组件的属性和方法

在Vue 3中，可以通过`ref`和`toRef`来暴露子组件的实例给父组件，以便父组件能够使用子组件的属性和方法。

首先，在子组件中，你可以使用`ref`来创建一个响应式的引用，并将子组件的实例赋值给该引用。例如：

import { ref } from 'vue';

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

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

    // 子组件的属性和方法
    const childProperty = ref('Child Property');
    const childMethod = () => {
      console.log('Child Method');
    };

    return {
      childComponent,
      childProperty,
      childMethod
    };
  }
};

然后，在父组件中，你可以使用`toRef`来创建一个对子组件实例的引用，并通过该引用访问子组件的属性和方法。例如：

import { toRef } from 'vue';

export default {
  setup() {
    // 引用子组件的实例
    const childRef = toRef(childComponent, 'value');

    // 父组件可以访问子组件的属性和方法
    console.log(childRef.childProperty); // 输出：Child Property
    childRef.childMethod(); // 输出：Child Method

    return {};
  }
};

这样，通过`ref`和`toRef`的配合使用，就可以在Vue 3中实现将子组件的实例暴露给父组件，以便父组件能够使用子组件的属性和方法。