vue2自定义useVModel函数

父组件:

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>
相关推荐
爱隐身的官人3 分钟前
新后端漏洞(上)- Aapache Tomcat AJP 文件包含漏洞(CVE-2020-1938)
java·tomcat·ajp
张迅之13 分钟前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
@CLoudbays_Martin1115 分钟前
为什么动态视频业务内容不可以被CDN静态缓存?
java·运维·服务器·javascript·网络·python·php
四谎真好看28 分钟前
Java 学习笔记(进阶篇2)
java·笔记·学习
上官浩仁42 分钟前
springboot ioc 控制反转入门与实战
java·spring boot·spring
叫我阿柒啊1 小时前
从Java全栈到前端框架:一位程序员的实战之路
java·spring boot·微服务·消息队列·vue3·前端开发·后端开发
蔗理苦1 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
mqiqe2 小时前
架构-亿级流量性能调优实践
java·架构
二川bro2 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
野犬寒鸦2 小时前
力扣hot100:旋转图像(48)(详细图解以及核心思路剖析)
java·数据结构·后端·算法·leetcode