v-model语法糖是如何实现的

v-model基本概念：

v-model 实际上就是 $emit('input') 以及 props:value 的组合语法糖，只要组件中满足这两个条件，就可以在组件中使用 v-model。

不同的交互组件

• checkbox 和 radio使用 props:checked 属性和 $emit('change') 事件。
• select 使用 props:value 属性和 $emit('change') 事件。

但是，除了上面列举的这些，别的都是 $emit('input') 以及 props:value。

这里要遵循【单项数据流】，不应该在一个子组件内部改变 props 的值，想要修改数据要通过父组件

实现代码：

<template> 
    <div> 
        <input type="number" :value="currentValue" @input="changeValue" /> 
    </div> 
</template> 

<script> 
export default { 
    name: "NumberInput", 
    props:{ 
        value:{ 
            type: Number, 
            default: 0, 
            require: true 
        } 
    }, 
    data(){ 
        return{ 
            currentValue: this.value 
        } 
    }, 
    watch: { 
        value(newVal){ 
            this.currentValue = newVal; 
        } 
    }, 
 </script> 
 
 <style lang="stylus" scoped> </style>

props:value

用来控制 v-model 所绑定的值。

currentValue

由于 单向数据流 的原因，需要使用 currentValue 避免子组件对于 props 的直接操作。

$emit('input')

用来控制 v-model 值的修改操作,所有对于 props 值的修改，都要通知父组件。

watch监听

当组件初始化时从 value 获取一次值，并且当父组件直接修改 v-model 绑定值的时候，对于 value 的及时监听。