vue3之父组件中封了子组件的抽屉(弹框类),通过update:modelValue来进行父子组件的v-model="dialogVisible"通讯
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的状态值进行抽屉的显示隐藏