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>
相关推荐
程序员张32 小时前
Maven编译和打包插件
java·spring boot·maven
ybq195133454313 小时前
Redis-主从复制-分布式系统
java·数据库·redis
weixin_472339464 小时前
高效处理大体积Excel文件的Java技术方案解析
java·开发语言·excel
小毛驴8504 小时前
Linux 后台启动java jar 程序 nohup java -jar
java·linux·jar
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
DKPT5 小时前
Java桥接模式实现方式与测试方法
java·笔记·学习·设计模式·桥接模式
好奇的菜鸟6 小时前
如何在IntelliJ IDEA中设置数据库连接全局共享
java·数据库·intellij-idea
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
DuelCode7 小时前
Windows VMWare Centos Docker部署Springboot 应用实现文件上传返回文件http链接
java·spring boot·mysql·nginx·docker·centos·mybatis