本篇内容主要讲解“Vue组件上的v-model双向绑定原理是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue组件上的v-model双向绑定原理是什么”吧!
组件上的v-model原理
v-model指令在组件上的编译过程的parse阶段与在表单元素上一样（可以参考），与普通表单元素不同之处在于genCode的阶段，在执行model函数生成代码的时候，会执行genComponentModel函数：
v-model编译阶段
export default function model ( el: ASTElement, dir: ASTDirective, _warn: Function): ?boolean { warn = _warn // 解析指令对象的值、修饰符、标签、类型 const value = dir.value const modifiers = dir.modifiers const tag = el.tag const type = el.attrsMap.type ...... } else if (tag === 'input' || tag === 'textarea') { // 本案例进入这个逻辑，我们分析一下 genDefaultModel(el, value, modifiers) } else if (!config.isReservedTag(tag)) { // 非保留标签，说明是组件节点，执行genComponentModel genComponentModel(el, value, modifiers) // component v-model doesn't need extra runtime return false } ...... return true}export function genComponentModel ( el: ASTElement, value: string, modifiers: ?ASTModifiers): ?boolean { // 解析修饰符 const { number, trim } = modifiers || {} const baseValueExpression = '$$v' let valueExpression = baseValueExpression // 有trim修饰符，进入下面逻辑，生成value表达式 if (trim) { valueExpression = `(typeof ${baseValueExpression} === 'string'` + `? ${baseValueExpression}.trim()` + `: ${baseValueExpression})` } // 有number修饰符，生成下面表达式 if (number) { valueExpression = `_n(${valueExpression})` } // 解析 value，生成解析规范后的表达式 const assignment = genAssignmentCode(value, valueExpression) // AST element上挂载model对象 el.model = { value: `(${value})`, expression: `"${value}"`, callback: `function (${baseValueExpression}) {${assignment}}` }}可以看到组件执行完genDirectives解析model指令后，会在AST element节点上生成model对象，这是与普通表单元素不同的地方。组件的v-model在genCode过程中，执行完genDirectives后还有有一段逻辑，如下：
export function genData (el: ASTElement, state: CodegenState): string { let data = '{' // directives may mutate the el's other properties before they are generated. // 解析model指令 const dirs = genDirectives(el, state) if (dirs) data += dirs + ',' ...... // component v-model // 组件上的v-model，进入该逻辑，拼接生成下面代码字符串 if (el.model) { data += `model:{value:${ el.model.value },callback:${ el.model.callback },expression:${ el.model.expression }},` }到这个时候才生成了最终的代码字符串。
组件生成阶段
export function createComponent ( Ctor: Class<Component> | Function | Object | void, data: ?VNodeData, context: Component, children: ?Array<VNode>, tag?: string): VNode | Array<VNode> | void { // ... // transform component v-model data into props & events // 如果data上有model属性 if (isDef(data.model)) { // 调用transformModel，传入的参数为组件构造器的options配置项 transformModel(Ctor.options, data) } // ... const vnode = new VNode( `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`, data, undefined, undefined, undefined, context, { Ctor, propsData, listeners, tag, children }, asyncFactory ) return vnode}在创建组件的时候，有上面这样一段逻辑，当分析到节点上有model对象的时候，会调用transformModel函数，对v-model对象做下转化：
// transform component v-model info (value and callback) into// prop and event handler respectively.function transformModel (options, data: any) { // 找到model上的prop属性 const prop = (options.model && options.model.prop) || 'value' // 找到model上的event事件 const event = (options.model && options.model.event) || 'input' // 在data的props属性对象上添加prop属性值 ;(data.props || (data.props = {}))[prop] = data.model.value // 在data的on属性对象上添加event事件 const on = data.on || (data.on = {}) if (isDef(on[event])) { on[event] = [data.model.callback].concat(on[event]) } else { on[event] = data.model.callback }}可以看到最终是将编译过程中生成的model对象，解析成为value属性和input事件，扩展到组件构造器的options配置项中。
以上可以得知，组件上v-model指令的本质也是生成了value属性和input事件。
到此，相信大家对“Vue组件上的v-model双向绑定原理是什么”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
