vue3 怎么获取refs

在Vue3中获取refs有多种方式，下面介绍其中两种方法：

1. 使用`ref`函数创建一个响应式的对象，在组件模板中使用`ref`的字符串参数创建一个对元素或子组件的引用，然后通过访问`$refs`对象获取该引用。如下所示，使用`ref`函数创建一个名为`myComponentRef`的`ref`，然后在组件的模板中使用`ref`字符串参数来引用组件，最后就可以通过`this.$refs.myComponentRef`来访问组件了[^1]。

<template>
  <MyComponent ref="myComponentRef" />
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  mounted() {
    console.log(this.$refs.myComponentRef);
  }
}
</script>

2. 使用`defineExpose`函数暴露子组件中的变量或函数，然后在父组件中访问暴露出来的变量或函数。如下所示，使用`defineExpose`函数暴露出一个名为`schemaFormRef`的`ref`，然后在父组件中就可以通过访问子组件实例的`schemaFormRef`属性来访问该`ref`了。

<template>
  <MyComponent />
</template>

<script>
import { defineComponent, defineExpose, ref } from 'vue';
import { FormActionType } from './types';

export default defineComponent({
  setup() {
    const schemaFormRef = ref<FormActionType>();
    const validateFields = async (nameList?: NamePath[]) => {
      return schemaFormRef.value?.validateFields(nameList);
    };
    const validate = async (nameList?: NamePath[]) => {
      await schemaFormRef.value?.validate(nameList);
      return formProps;
    };
    const onMounted = () => {
      console.log('schemaFormRef.value', schemaFormRef.value);
    };
    defineExpose({
      schemaFormRef,
      validate,
      validateFields,
    });

    onMounted();

    return {
      schemaFormRef,
      validate,
      validateFields,
    };
  },
});
</script>