封装表单组件，如果通过计算属性来解决打破单项数据流问题-526互联

平常当我们封装表单组件时候，子组件修改了内容，会通过emit的方式触发父组件来修改数据或者使用发布订阅方式，从而保证单项数据流不被打破。

那如何用computed 计算属性来简化该方式呢

form页面

<el-input  v-model='model.keyword'>
   <el-select v-model='mode.selectValue'>
        ......
    </el-select>
   ......
</el-input>


<script setup>
  const props = defineProps({
     modelValue: {
         type: Object,
         required: true
     }
  })
  
  const emit = defineEmits(['update:modelValue'])

  const model = computed({
     get(){
         //返回代理对象
         return new Proxy(props.modeValue, {
            set(obj, name, val) {
                  emit('update:modelValue', {
                     ...obj,
                     [name]: val
                  });
                  return true
            }
         })
        // retuen props.modeValue;
     },
     set(val){
        emit('update:modelValue', val)
     }
  })


***********以下扩展使用
import { useVMOdel } from './useVModel'

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

</script>

扩展，将model-computed 再次封装成一个辅助函数 useVModel

export function useVModel (props, propName, emit){  //属性， 属性字段名， emit方法
  return computed({

     get(){
         //返回代理对象
         return new Proxy(props[propName], {
            set(obj, name, val) {
                  emit('update:' + propName, {
                     ...obj,
                     [name]: val
                  });
                  return true
            }
         })
        // retuen props.modeValue;
     },

     set(val){
        emit('update:' + propName, val)
     }
  })