vue父子组件实现表单双向绑定

一、核心代码

import {computed} from "vue";

export function useVModel(props: any, propName: string, emit: any) {
  //传入的参数是对象
  if (Object.prototype.toString.call(props[propName]).slice(8, -1) === 'Object') {
    return computed({
      get() {
        return new Proxy(props[propName], {
          set(obj, name, val) {
            emit('update:' + propName, {
              ...obj,
              [name]: val,
            })
            return true;
          }
        })
      },
      set(val) {
        emit('update:' + propName, val)
      }
    })
  } else if (Object.prototype.toString.call(props[propName]).slice(8, -1) === 'Array') {//传入的参数是数组
    return computed({
      get() {
        return props[propName];
      },
      set(val) {
        emit('update:' + propName, val)
      }
    })
  } else {//基本数据类型以及其他
    return computed({
      get() {
        return props[propName];
      },
      set(val) {
        emit('update:' + propName, val)
      }
    })
  }
}

二、运用

子组件

<my-layer v-model:show="isShowLayer"/>
……
import {useVModel} from "@/hooks/useVModel";
……
props: {
  show: {type: Boolean, default: false},
},
……
let isShowLayer = useVModel(props, "show", emit);
……
layerClose() {
        isShowLayer.value = false;
        
      },

父组件

    <my-choose-point v-model:show="isShowMap"/>