v-model原理?(2021/01/05)
①是个一般作用于“表单元素”及“组件”上面指令,来创建双向数据绑定;
②说穿了就是v-bind:xxx及v-on:xxx的快捷语法糖(等价于动态增加prop+dom绑定事件);
<p>{{inputValue}}</p>
<input v-model="inputValue"/>
改版:
<p>{{inputValue}}</p>
<input v-bind:value=”inputValue” v-on:input=”v => inputValue=v”/>
③其他表单元素改写使用的属性和事件:
Text\textarea – value – input
checkbox\radio – checked – change
Select – value – change
④自定义组件的v-model绑定:一般在自定义组件vue会默认使用名为value的prop属性及名为input的事件进行绑定;但是在其他业务场景下往往不全面,所以也提供了model属性对象配置:
Model:{
Prop:‘checked’,
Event:‘change’
}
这样设置了后还是仍需要在子组件内部声明props即来绑定自定义的prop值。
表现就是在子组件内部使用v-bind:checked=”propsChecked”(v-bind后面的值来自于model设置的prop;后面赋值项为父传子props下来的属性值)使用v-on:change=” e m i t ( ‘ c h a n g e ’ , emit(‘change’, emit(‘change’,event.target.checked)”(v-on后面的值来自model设置的event;后面事件响应到父组件监听的change事件,payload传值为当前checked状态)
⑤相关修饰符:
v-model.number(简易版验证数字输入);
v-model.lazy(希望双向数据响应不同步而是在change事件的时候如光标离开后进行同步);
v-model.trim(前后空格清除)
⑥源码体现:
// src/platforms/web/compiler/directives/model.js
这里我猜想通过模板编译得到‘v-model’指令及修饰符’.lazy’’.number’’.trim’ ASTModifiers
const { lazy, number, trim } = modifiers || {}再分别根据这些写逻辑
最后调用addProp()\addHandler()两个方法来实现添加属性及dom事件