vue3封装弹窗组件,数据回显
封装组件的流程,第一理解具体的业务需求。想好数据的交互层级,数据进数据出的具体逻辑。
vue的组件封装记住一点不要在子组件修改父组件的数据,需要修改数据emit方法抛出数据父组件修改。
第一步构建template模板
<template>
<a-modal
width="800.0px"
v-model:visible="visible"
@ok="handleOk"
@cancel="handleCancel"
:maskClosable="false"
>
<template #title> {{ title }} </template>
<a-form ref="formRef" :model="state.form" :style="{ width: '600px' }">
<a-form-item
field="dictName"
:rules="[{ required: true, message: '字典名称必填' }]"
:validate-trigger="['change', 'input']"
tooltip="输入字典名称"
label="字典名称"
>
<a-input v-model="state.form.dictName" placeholder="输入字典名称" />
</a-form-item>
<a-form-item
field="dictType"
:rules="[{ required: true, message: '字典类型必填' }]"
label="字典类型"
>
<a-input v-model="state.form.dictType" placeholder="输入字典类型" />
</a-form-item>
<a-form-item
field="status"
:rules="[{ required: true, message: '请选择状态' }]"
label="状态"
>
<a-radio-group v-model="state.form.status">
<a-radio value="0">正常</a-radio>
<a-radio value="1">停用</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item field="remark">
<a-textarea
v-model="state.form.remark"
placeholder="请输入内容"
allow-clear
/>
</a-form-item>
</a-form>
</a-modal>
</template>
这就是弹窗组件的一个基本dom结构。这个模板上看的话我们需要父组件传给我们两个值,
一个是弹窗的状态,一个是form表单的值。
第二步定义参数属性
const props = defineProps({
visible: {
type: Boolean,
default: () => false,
},
formData: {
type: Object as PropType<Dict.DictType>,
default: () => {
return {
remark: '',
dictId: 0,
dictName: '',
dictType: '',
status: '0',
};
},
},
});
第三步就是子组件的赋值
const formRef = ref<FormInstance>();
const state = reactive<Dict.State>({
form: {
remark: '',
dictId: 0,
dictName: '',
dictType: '',
status: '0',
},
});
const { visible, formData } = toRefs(props);
watch(
() => formData,
(value) => {
state.form = value as unknown as Dict.DictType;
},
{
immediate: true,
deep: true,
}
);
接受父组件的formData需要使用toRefs结构不然传过来的值会丢失响应式。
最后把我们验证之后的formData值传递给父组件去调用接口就完成了,在这之前需要声明emit
const emit = defineEmits(['handleClose', 'handleSubmitData']);
const handleCancel = () => {
emit('handleClose', false);
formRef.value?.clearValidate();
};
const handleOk = () => {
formRef?.value?.validate((r: any, Record: any) => {
// eslint-disable-next-line no-void
if (r == void 0) {
emit('handleSubmitData', state.form);
emit('handleClose', false);
}
});
};
通过emit的方法把子组件的数据传到父组件。这个有很多种方法回调函数等等就不一一列举了。
到这弹窗组件就完成了。