父组件给子组件传值
<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
})
}
})