前言

vue的v-model实际上时一种语法糖，简洁的实现了数据双向绑定的效果，那么我们平时二次封装比较通用的组件的时候也想实现数据双向绑定应该怎么办呢？

一、v-model和model

v-model 指令可以实现在常用的表单元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。同时v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源，v-model实际上只是利用不同元素的input或者change事件改变绑定数据的值。

二、实现双向绑定

根据以上的说明，大致也能知道如何实现v-model，其实就是通过元素的input或者change事件来实现。下面以input组件为例，两种方式实现，实际上实现方法差不多~

方式一：

通过子组件触发input事件实现，当用到的value prop会冲突时，可以利用model实现，官方文档提供这样的能力解决这种冲突。

<el-input size="medium" :value="value" @input="input"></el-input>

export default {
    props: {
        value: {
            type: null,
        }
    },
    methods: {
        input(v) {
            this.$emit('input', v)
        }
    }
    
}

方式二：

通过子组件修改computed的值触发set方法，从而实现修改父组件的值

<el-input size="medium" v-model="tempValue"></el-input>

export default {
    props: {
        value: {
            type: null,
        },
    },
    computed: {
        tempValue: {
            get() {
                return this.value;
            },
            set(v) {
                this.$emit('input', v);
            }
        }
    },
}

效果：

二、总结

通过以上的方式就可以简单的实现封装一个双向绑定组件的能力啦~ github链接：github.com/qiangguangl…