网站建设ppt方案模板下载,网站网页转小程序教程,三六五网做网站吗,wordpress4.9主题之前 Vue3 只停留在理论#xff0c;现在项目重构#xff0c;刚好可以系统的实战一下#xff0c;下面是封装了一个抽屉表单组件#xff0c;直接在父组件中通过调用子组件的方法打开抽屉#xff1a;
父组件#xff1a;
templatediv idapp现在项目重构刚好可以系统的实战一下下面是封装了一个抽屉表单组件直接在父组件中通过调用子组件的方法打开抽屉
父组件
templatediv idappdiv clickgetChildValueopen/divcustom-formrefchildRef:fieldsfields:formform:rulesrules:saveFormsaveForm/custom-form/div
/templatescript 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子组件
templateel-drawerv-modeldrawer:titletitle:sizewidth:before-closeresetFormel-form :modelform :rulesrules refcustomForm label-widthautoel-form-itemv-forfield in fields:keyfield.prop:labelfield.label:propfield.propcomponent:isfield.componentv-bindfield.propsv-modelform[field.prop]//el-form-item/el-formtemplate #footerdiv styleflex: autoel-button typeprimary clicksubmitForm保存/el-buttonel-button clickresetForm取消/el-button/div/template/el-drawer
/templatescript 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你可以控制哪些属性和方法可以被外部访问从而增强组件的封装性和安全性。
