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

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

1. 基本原理：

// VueUse的useVModel简化实现
function useVModel(props, propName, emit) {
  return computed({
    get: () => props[propName],
    set: (value) => emit(`update:${propName}`, value)
  })
}使用useVModel简化 Vue 组件中 `v-model` 的实现

2. 具体应用：

// 在子组件（BusDevDetail）组件中
const isShow = useVModel(props, "isDetailDrawerShow", emit);

// 等价于手动实现：
const isShow = computed({
  get: () => props.isDetailDrawerShow,
  set: (value) => emit("update:isDetailDrawerShow", value)
});

3. 功能实现：

<!-- 父组件 -->
...
<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>

4. 主要作用：

• 实现双向绑定：父组件的 isDetailDrawerShow 与子组件的 isShow 保持同步
• 简化代码：不需要手动编写 get/set
• 自动处理事件发射：当 isShow 改变时，自动触发 update:isDetailDrawerShow 事件

5. 使用场景：

• 抽屉/对话框的显示隐藏控制
• 表单输入的双向绑定
• 任何需要父子组件数据同步的场景