vue3中ref获取子组件的值

一、< script setup >通过ref获取子组件的值或方法

父组件：

<pane-account ref="accountRef"></pane-account><script lang="ts" setup>import{ ref }from'vue';import PaneAccount from'./pane-account.vue';const accountRef = ref<InstanceType<typeof PaneAccount>>();constloginAction=()=>{// 父组件获取子组件ref值
      accountRef.value?.accountLoginAction();};</script>

子组件：

<script lang="ts" setup>import{ ref, reactive, defineProps, defineExpose }from'vue';importtype{ ElForm }from'element-plus';const formRef =ref<InstanceType<typeof ElForm>>();constaccountLoginAction=()=>{
  formRef.value?.validate((valid)=>{if(valid){console.log('登录');}else{console.log('222');}});};// 只有defineExpose暴露的值或方法才能被父组件通过ref访问 defineExpose({
  accountLoginAction
});

二、setup（）通过ref获取子组件值

父组件：

<pane-account ref="accountRef"></pane-account><script lang="ts">import{ defineComponent, reactive, ref }from'vue'exportdefaultdefineComponent({setup(){const accountRef =ref<InstanceType<typeof LoginAccount>>()constloginAction=()=>{
     accountRef.value?.accountLoginAction()}return{
      loginAction,
      accountRef
    }}})</script>

子组件：

<script lang="ts">import{ defineComponent, PropType, computed, ref }from'vue'exportdefaultdefineComponent({setup(props,{ emit }){constaccountLoginAction=()=>{console.log('子组件的方法')}return{
      accountLoginAction
    }}})</script>