关闭或取消清空表单内容

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

父组件 直接调用子组件

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: [],};
};
-------------------------------
父组件

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

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

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！