使用useVModel简化Vue组件中v-model的实现

使用useVModel简化 Vue 组件中 v-model 的实现 基本原理： // VueUse的useVModel简化实现 function useVModel(props, propName, emit) { return computed({ get: () => props[propName], set: (value) => emit(`update:${propName}`, value) }) }使用useVModel简化 Vue 组件中 `v-model` 的实现 具体应用： // 在子组件（BusDevDetail）组件中 const isShow = useVModel(props, "isDetailDrawerShow", emit); // 等价于手动实现： const isShow = computed({ get: () => props.isDetailDrawerShow, set: (value) => emit("update:isDetailDrawerShow", value) }); 功能实现： <!-- 父组件 --> ... <BusDevDetail v-model:isDetailDrawerShow="isDetailDrawerShow" /> ... <!-- 子组件 BusDevDetail.vue --> <template> ... <el-drawer v-model="isShow"> <!-- 抽屉内容 --> </el-drawer> ... <template #footer> <div style="flex: auto"> <el-button plain @click="cancel">取消</el-button> </div> </template> </template> <script> ... const cancel = () => { isShow.value = false; }; ... </script> 主要作用： 实现双向绑定：父组件的 isDetailDrawerShow 与子组件的 isShow 保持同步简化代码：不需要手动编写 get/set自动处理事件发射：当 isShow 改变时，自动触发 update:isDetailDrawerShow 事件 使用场景： 抽屉/对话框的显示隐藏控制表单输入的双向绑定任何需要父子组件数据同步的场景