关闭或取消清空表单内容

1.v-if 布尔值控制显示隐藏，
使用v-if 切换表单显示隐藏，关闭表单时v-if设置为 false，打开表单时使用v-if=“true”

父组件 直接调用子组件
<version-drawer
    v-if="showDrawer"
    v-model:visible="showDrawer"
    :data="editData"
    @onEmitSubmit="onEmitSubmit"
/>

2.watch监听在组件关闭窗口里调用props里的所有为空的属性

子组件
props: {
    data: { type: Object, required: false, default: () => {} },
    roleList: { type: Array, required: false, defualt: () => [] },
    visible: { type: Boolean, required: true, default: false },
},
watch(
    () => props.visible,
    (data) => {
        showDrawer.value = data;
        resetTemp();
    }
);
// 清空form
const resetTemp = () => {
    editData.value = {
        uid: '',
        appId: '15',
        name: '',
        email: '',
        mobile: '',
        loginName: '',
        status: 1,
        roles: [],
    };
};
-------------------------------
父组件
<user-drawer
    v-model:visible="showDrawer"
    :data="editData"
    :role-list="roleList"
    @onEmitSubmit="onEmitSubmit"
/>

---

emit(‘update:visible’, 布尔值);

父传子 -> props
子传父 -> $emit

在父组件中点击行事件修改弹出框的显示隐藏
子模态框的显示隐藏 可以通过父组件的点击控制

子组件
emits: ['update:visible', 'onEmitSubmit'],
// 关闭抽屉
const onClose = () => {
    showDrawer.value = false;
    emit('update:visible', showDrawer.value);
};
------------