Vue 父子传值确保数据单向流

在子组件中通过v-model 实现数据单向流

// 父组件
<Actions_2_form
        v-model="homefrom.data"
        :lims="editLim"
        ref="actionsform"
 />

const homefrom = reactive(
    {
        data:{
            name:'',
            age:''
        }
    }
)

// 子组件
<input type="text" v-model="model.name" />
<input type="text" v-model="model.age" />

const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(["update:modelValue"]);
const model = useVModel(props, "modelValue", emit);

useVModel

export const useVModel = (props,propName,emity) => {
  const model = computed({
    get() {
      const proxy = new Proxy(props[propName],{
        get(target,key) {
          return Reflect.get(target,key);
        },

        set(target,key,value) {
          target[key] = value;
          emit(`update:${propName}`,target);
          return true;
        }
      });
      return proxy
    },
    set(val) {
      emit(`update:${propName}`, val);
    }
  });
  return model;
}

Proxy 代理

1、对象访问的监控和拦截

2、数据绑定和响应式系统

3、安全性和验证

let obj = {};
       let handler = new Proxy(obj,{
        set(target,prop,value) {
            console.log('target',target);
            console.log('prop',prop);
            console.log('value',value);

            if(typeof value != 'string') {
                throw new TypeError('Value must be a string');
            }

            target[prop] = value
        }
       })

       handler.name = 'Benson';

       console.log(obj)
       handler.age = 27