使用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 事件
- 使用场景：
- 抽屉/对话框的显示隐藏控制
- 表单输入的双向绑定
- 任何需要父子组件数据同步的场景
