vue3父组件调用子组件方法的思路及实例代码
作者：愉快的小跳蛙
在Vue.js框架中父子组件之间的通信是常见的需求,其中父组件调用子组件的方法是实现特定功能的重要方式,这篇文章主要介绍了vue3父组件调用子组件方法的相关资料,需要的朋友可以参考下
需求：在vue3中需要在父组件调用子组件的方法
思路：通过ref和defineExpose直接暴露给父组件
1.子组件暴露表单验证方法
<template>
<a-form ref="formRef" :model="formState" :rules="rules">
<a-form-item label="用户名" name="username">
<a-input v-model:value="formState.username" />
</a-form-item>
</a-form>
</template>
<script setup>
import { ref } from 'vue';
const formRef = ref(); // 表单引用
const formState = ref({ username: '' }); // 表单数据
const rules = { // 验证规则
username: [{ required: true, message: '请输入用户名' }]
};
// 暴露给父组件的验证方法
const validate = () => formRef.value.validate();
defineExpose({ validate }); // 暴露方法
</script>2.父组件触发子组件表单验证
<template>
<ChildForm ref="childFormRef" />
<a-button @click="handleSubmit">提交</a-button>
</template>
<script setup>
import { ref } from 'vue';
import ChildForm from './ChildForm.vue';
const childFormRef = ref(); // 子组件引用
const handleSubmit = async () => {
try {
const values = await childFormRef.value.validate();
console.log('验证通过，数据：', values);
// 提交数据逻辑...
} catch (error) {
console.log('验证失败', error);
}
};
</script>总结
到此这篇关于vue3父组件调用子组件方法的文章就介绍到这了,更多相关vue3父组件调用子组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！