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);
};
------------