vue3中使用计算属性批量更新父组件传来的值

父组件给子组件传值

<template>
  <input-my ref="myRefInput" v-model="formLabelAlign"></input-my>
</template>
<script setup>
import {ref } from "vue";
let formLabelAlign = ref({
	  name: '你阿红',
	  region: '',
	  type: '',
	})
</script>

子组件

<template>
	<div >
		<el-form
		    label-width="100px"
		    :model="model"
		    style="max-width: 460px"
		  >
		    <el-form-item label="Name">
		      <el-input v-model="model.name" />
		    </el-form-item>
		    <el-form-item label="Activity zone">
		      <el-input v-model="model.region" />
		    </el-form-item>
		    <el-form-item label="Activity form">
		      <el-input v-model="model.type" />
		    </el-form-item>
		  </el-form>
	</div>
</template>

<script setup>
	import { useVmodel } from "../hooks/useVModel"
	const props = defineProps({
		modelValue:{
			type:Object,
			required:true
		}
	})
	const emit = defineEmits(['update:modelValue'])
	const model = useVmodel(props,'modelValue',emit)
</script>

在子组件中将计算属性写成了一个hooks，hooks代码如下，使用到了Proxy代理，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写，实现了批量的计算属性读写操作，只要读取或者改变拦截的目标对象就会触发proxy的get和set方法，我们这里只要props[propName]对象中属性发生改变就会触发proxy中的set方法，然后返回一个Proxy实例对象引发计算属性更新

import { computed } from 'vue';
export function useVmodel(props,propName,emit){
	return computed({
		get(){
			return new Proxy(props[propName],{
				set(obj,name,val){
					console.log("obj--->",obj)
					console.log("name--->",name)
					console.log("val--->",val)
					emit('update:'+propName,{
						...obj,
						[name]:val
					})
					return true
				}
			})
		},
		set(){
			emit('update:'+propName,val)
		}
	})
}
 

如果不使用proxy在目标对象之前架设一层“拦截”的话，计算属性就只能一个一个的实现了

		const name = computed({
		get(){
			return props.modelValue.name;
		},
		set(val){
			emit('update:modelValue',{
				...props.modelValue,
				name:val
			})
		}
	})
	const region = computed({
		get(){
			return props.modelValue.region;
		},
		set(val){
			emit('update:modelValue',{
				...props.modelValue,
				region:val
			})
		}
	})
	const type = computed({
		get(){
			return props.modelValue.type;
		},
		set(val){
			emit('update:modelValue',{
				...props.modelValue,
				type:val
			})
		}
	})