Vue:自定义v-model数据双向绑定

示例

age 数据单向绑定 name 数据双向绑定

    
        单向绑定数据
        age: {{ age }}
        age: 
        
        双向绑定数据
        name: {{name}}
        name: 
    




export default {
    data(){
        return {
            age: 23,
            name: "王小二"
        }
    }
}

观察代码发现，name的input 多了一个事件绑定@input="name=$event.target.value" 所以，实现数据双向绑定的原理就是：

1、数据name单向传递给input；
2、input触发事件后将name的值进行了修改

自定义v-model双向绑定

child.vue

    




export default {
    props: ["age"],

    model: {
        prop: "age",     // 对应的变量
        event: "change"  // 触发事件
    }, 

    methods: {
        // 把修改后的值传递回去
        change(value){
            console.log(value)
            this.$emit('change', value)
        }
    }
}

main.vue

    
        子组件v-model示例

        age: {{age}}

        age: 
    




import Child from './child.vue';

export default {
    components: {
        Child
    },

    data(){
        return {
            age: 23,
        }
    }
}

启动调试

$ vue serve main.vue

这样就实现了自定义v-model语法 原理很简单

1、父组件给子组件传值
2、子组件值修改，触发事件修改父组件值
3、父组件再将新值传递给了子组件，子组件的接收到父组件变更的值

所以还是数据还是单向流动

参考：

1. Vue之自定义组件的v-model
2. vue自定义组件上的v-model如何与子组件数据绑定