Vue3通过ref方式获取子组件的属性与方法

// 父组件
<template>
  <update-password ref="updatePwd"></update-password>
</template>
<script lang="ts" setup>
  import updatePassword from '@/components/updatePassword/update-password.vue' // 引入子组件
  // 定义组件ref的类型
  const updatePwd = ref<InstanceType<typeof updatePassword>>()
  
  // 使用子组件的属性与方法
  const updatePasswordHandle = () => {
    console.log(updatePwd.value?.dialogVisible)
  }
</script>


// 子组件
<script lang="ts" setup>
  const dialogVisible = ref(false)  

  // 导出父组件需要用的属性与方法
  defineExpose({
    dialogVisible
  })
</script>