vue3 父组件调用子组件 el-drawer 抽屉

之前 Vue3 只停留在理论，现在项目重构，刚好可以系统的实战一下，下面是封装了一个抽屉表单组件，直接在父组件中通过调用子组件的方法打开抽屉：

父组件：

<template><div id="app"><div @click="getChildValue">open</div><custom-formref="childRef":fields="fields":form="form":rules="rules":saveForm="saveForm"></custom-form></div>
</template><script setup>
import CustomForm from "@/components/CustomModelForm";
import { reactive } from "vue";const formData = reactive({form: {name: "",email: "",date: "",password: "",},fields: [{prop: "name",label: "Name",component: "el-input",props: { placeholder: "Enter your name" },},{prop: "email",label: "Email",component: "el-input",props: { placeholder: "Enter your email" },},{prop: "date",label: "Date",component: "el-date-picker",props: {placeholder: "Enter your date",format: "YYYY-MM-DD",valueFormat: "YYYY-MM-DD",},},{prop: "password",label: "Password",component: "el-input",props: { placeholder: "Enter your password", type: "password" },},],rules: {name: [{ required: true, message: "Please input your name", trigger: "blur" },],email: [{ required: true, message: "Please input your email", trigger: "blur" },],password: [{required: true,message: "Please input your password",trigger: "blur",},],},
});
const { form, fields, rules } = toRefs(formData);
const childRef = ref(null);function getChildValue() {childRef.value?.open();
}function saveForm() {console.log(form.value);
}
</script>

子组件：

<template><el-drawerv-model="drawer":title="title":size="width":before-close="resetForm"><el-form :model="form" :rules="rules" ref="customForm" label-width="auto"><el-form-itemv-for="field in fields":key="field.prop":label="field.label":prop="field.prop"><component:is="field.component"v-bind="field.props"v-model="form[field.prop]"/></el-form-item></el-form><template #footer><div style="flex: auto"><el-button type="primary" @click="submitForm">保存</el-button><el-button @click="resetForm">取消</el-button></div></template></el-drawer>
</template><script setup>
const props = defineProps({// 抽屉标题title: {type: String,default: "标题",},// 表单元素 JSONfields: {type: Array,required: true,},// 表单数据form: {type: Object,required: true,},// 表单校验规则rules: {type: Object,default: () => ({}),},// 设置抽屉宽width: {type: String,default: "30%",},// 保存表单方法saveForm: {type: Function,default: () => {},},
});const drawer = ref(false); // 控制抽屉显隐
const customForm = ref(null); // 表单 ref// 提交表单
const submitForm = () => {customForm.value.validate((valid) => {if (valid) {props.saveForm();resetForm();} else {console.log("error submit!!");return false;}});
};// 打开抽屉
function open() {drawer.value = true;
}// 关闭抽屉
const resetForm = () => {customForm.value.resetFields();drawer.value = false;
};defineExpose({open,
});
</script>

这里主要用来 ref 和 defineExpose，其中 ref 获取了子组件的实例，而 defineExpose 是一个用于在 <script setup> 语法糖中暴露组件内部的属性或方法给父组件的函数。通过使用 defineExpose，你可以控制哪些属性和方法可以被外部访问，从而增强组件的封装性和安全性。