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>
相关推荐
HoHeHa1 分钟前
IDEA 手动下载安装数据库驱动,IDEA无法下载数据库驱动问题解决方案,IDEA无法连接数据库解决方案(通用,Oracle为例)
java·数据库·intellij-idea
你可以叫我仔哥呀7 分钟前
Java程序员学从0学AI(七)
java·开发语言·人工智能·ai·spring ai
芒果1259 分钟前
【转载文章】ECharts-GL 实现世界级、国家级、省市级 3D 地图
前端
一只小风华~19 分钟前
JavaScript:数组常用操作方法的总结表格
前端·javascript·数据结构·vue.js·算法
前端老鹰23 分钟前
JavaScript Array.prototype.some ():数组判断的 “快捷侦探”
前端·javascript
张元清24 分钟前
揭秘JS事件循环:一道字节跳动面试题带你深入理解async/await、Promise与RAF
前端·react.js·面试
杨DaB25 分钟前
【SpringMVC】MVC中Controller的配置 、RestFul的使用、页面重定向和转发
java·笔记·后端·学习·spring·mvc·restful
KenXu27 分钟前
F2C-Chrome插件-Figma免费的DevMode来了!
前端
linyb极客之路29 分钟前
干货来袭!5 分钟学会快速实现责任链,效率直接拉满!
java
创码小奇客33 分钟前
保姆级 Talos 超参数优化实战指南:从入门到封神
java·后端·架构