vue3.0获取$refs

场景一

 <login-pop ref="login"></login-pop>


  setup() {
    const login = ref()
    const openDialog = () => {
      login.value?.openDialog()
    }
    return { openDialog, login }//**记得把所需要的方法和属性值都要return**
  },

场景二：

如果在 < script setup> 语法糖的组件中返回值为{_v_skin:true}无法获取子组件内部信息

原因：使用 < script setup> 语法糖的组件是默认关闭的，也即通过模板 ref 或者 $parent 链获取到的组件的公开实例，不会暴露任何在 < script setup> 中声明的绑定。

方法：为了在 < script setup> 语法糖组件中明确要暴露出去的属性，使用 defineExpose 编译器宏将需要暴露出去的变量与方法放入暴露出去就可以

子组件使用defineExpose 暴露示例

 //表单验证
  const schemaFormRef = ref<FormActionType>();
  async function validateFields(nameList?: NamePath[] | undefined) {
    return schemaFormRef.value?.validateFields(nameList);
  }

  async function validate(nameList?: NamePath[] | undefined) {
    await schemaFormRef.value?.validate(nameList);
    return formProps;
  }
  onMounted(() => {
    console.log('schemaFormRef.value', schemaFormRef.value);
  });

  defineExpose({
    schemaFormRef,
    validate,
    validateFields,
  });