Example of code for ref obtaining the value of child components in vue3

1. <script setup> Get the value or method of a child component through ref

Parent component:

 &lt;pane-account ref="accountRef"&gt;&lt;/pane-account&gt;
 &lt;script lang="ts" setup&gt;
	import { ref } from 'vue';
	import PaneAccount from './';
	const accountRef = ref&lt;InstanceType&lt;typeof PaneAccount&gt;&gt;();
	const loginAction = () =&gt; {
	// Parent component gets the ref value of the child component	  ?.accountLoginAction();
	};
&lt;/script&gt;

Subcomponents:

&lt;script lang="ts" setup&gt;
import { ref, reactive, defineProps, defineExpose } from 'vue';
import type { ElForm } from 'element-plus';
const formRef = ref&lt;InstanceType&lt;typeof ElForm&gt;&gt;();
const accountLoginAction = () =&gt; {
  ?.validate((valid) =&gt; {
    if (valid) {
      ('Log in');
    } else {
      ('222');
    }
  });
};
// Only the value or method exposed by defineExpose can be accessed by the parent component through refdefineExpose({
  accountLoginAction
});

2. setup() gets the value of the child component through ref

Parent component:

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

Subcomponents:

&lt;script lang="ts"&gt;
import { defineComponent, PropType, computed, ref } from 'vue'
export default defineComponent({
  setup(props, { emit }) {
    const accountLoginAction = () =&gt; {
     ('Methods of Subcomponents')
    }
    return {
      accountLoginAction
    }
  }
})
&lt;/script&gt;

Summarize

This is the end of this article about ref obtaining the value of child components in vue3. For more related content about ref obtaining the value of child components, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!