vue2自定义useVModel函数

我谈山美，我说你媚2025-02-22 14:40

父组件：

javascript 复制代码

<template>
<div>
 父组件数据名字：<input v-model="person.name">
 父组件数据年龄：<input v-model="person.age">
 <son v-model="person"></son>
</div>
</template>

<script>
import Son from './son.vue'
export default ({
    name:'test',
    components:{Son},
    data(){
        return{
            person:{
                name:'zsh',
                age:'18'
            }
        }
    }
})
</script>

子组件：

javascript 复制代码

<template>
<div>
    {{pdata}}
 子组件数据名字：<input v-model="pdata.name">
 子组件数据年龄：<input v-model="pdata.age">
</div>
</template>

<script>
export default ({
    name:'Son',
    props:{
    value: {
        type: Object,
        default: () => ({}),
        },
    },
    computed:{
        pdata: {
            get(){
                const that = this;
                return new Proxy(this.value, {
                    get(target, key, receiver) {
                         return target[key];
                    },
                    set(target, key, value){
                        console.log('子组件修改了数据')
                        that.$emit("input", { ...target, [key]: value });
                        return true;
                    },
                })
            },
            set(value) {
                console.log("修改了value", value);
                this.$emit("input", value);
            },
        },
    }
})
</script>