eg:父组件a.vue
<AddAiDrawer :projectId="route.query.id" v-model="addAiShow" title="新增" type="spaceAi" @call-back-table="refreshTable" ></AddAiDrawer>
//新增 const addAiShow = ref(false); //打开新增 const openAddAi = () => { addAiShow.value = true; };
子组件:addAiDrawer.vue
<el-drawer v-model="dialogVisible" :title="props.title" size="30%" :destroy-on-close="true" @close="resetAI()"> <template #footer> <el-button type="" @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="saveAddAi(addAiFromRef)">保存</el-button> </template> </el-drawer>
const emit = defineEmits(["update:modelValue", "callBackTable", "callBackData"]); const dialogVisible = computed({ get() { return props.modelValue; }, set(newValue) { emit("update:modelValue", newValue); } });
总结:子组件和父组件都可以通过事件控制v-model的状态值进行抽屉的显示隐藏
标签:中封,dialogVisible,update,组件,const,model,modelValue From: https://www.cnblogs.com/lsc-boke/p/17597533.html