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的状态值进行抽屉的显示隐藏
分类:
vue3.0
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义