14. v-model 是如何实现的, 语法糖实际是什么？

14. v-model 是如何实现的, 语法糖实际是什么？

作用在表单元素上

动态绑定了 input 的 value 指向了 messgae 变量, 并且在触发 input 事件的时候去动态把 message 设置为目标值:

<input v-model="sth"/>
// 等同于
<input v-bind:value="message" v-on:input="message=$event.target.value">
// $event 指代当前触发的事件对象
// $event.target 指代当前触发的事件对象的 dom
// $event.target.value 就是当前 dom 的 value 值
// 在 @input 方法中, value => sth
// 在 value 中, sth => value
1
2
3
4
5
6
7
8

作用在组件上

在自定义组件中, v-model 默认会利用名为 value 的 prop 和名为 input 的事件。
本质是一个父子组件通信的语法糖, 通过 prop 和 $.emit 实现。
因此父组件 v-model 语法糖本质上可以修改为:

<child :value="message" @input="function(e){message = e}">child>
1

在组件的实现中, 可以通过 v-model 属性来配置子组件接收的 prop 名称, 以及派发的事件名称。
例子:

// 父组件
<aa-input v-model="aa">aa-input>
// 等价于
<aa-input v-bind:value="aa" v-on:input="aa=$event.target.value">aa-input>

// 子组件: 
<input v-bind:value="aa" v-on:input="onmessage">aa-input>
1
2
3
4
5
6
7

props:{
    value:aa,
},
methods:{
    onmessage(e){
        $emit('input',e.target.value)
    }
}
1
2
3
4
5
6
7
8

默认情况下, 一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。js 监听 input 输入框输入数据改变, 用 oninput, 数据改变以后就会立刻出发这个事件。通过 input 事件把数据 $emit 出去, 在父组件接受。父组件设置 v-model 的值为 input $emit 过来的值。