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>
相关推荐
你听得到11几秒前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆5 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
Percep_gan6 分钟前
idea的使用小技巧,个人向
java·ide·intellij-idea
缘来是庄6 分钟前
设计模式之迭代器模式
java·设计模式·迭代器模式
小磊哥er9 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0612 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444015 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆16 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子19 分钟前
Web开发中的文件下载
前端·javascript·面试
JosieBook22 分钟前
【Java编程动手学】Java常用工具类
java·python·mysql