• 当前位置
  • 首页
  • IT技术
  • 文章正文

vue.js_组件上的v_model双向绑定原理解析_Vue

  • 作者:自动秒收录
  • IT技术
  • 发布时间:2022-05-18T04:57:58
  • 热度:

目录

之前我们分析了Vuev-model指令在普通表单元素上的使用原理(点击这里跳转),这一节我们继续分析v-model指令在组件上的原理。

组件上的v-model原理

v-model指令在组件上的编译过程的parse阶段与在表单元素上一样(可以参考),与普通表单元素不同之处在于genCode的阶段,在执行model函数生成代码的时候,会执行genComponentModel函数:

v-model编译阶段

? ?

可以看到组件执行完genDirectives解析model指令后,会在AST element节点上生成model对象,这是与普通表单元素不同的地方。组件的v-modelgenCode过程中,执行完genDirectives后还有有一段逻辑,如下:

?

到这个时候才生成了最终的代码字符串。

组件生成阶段

?

在创建组件的时候,有上面这样一段逻辑,当分析到节点上有model对象的时候,会调用transformModel函数,对v-model对象做下转化:

?

可以看到最终是将编译过程中生成的model对象,解析成为value属性和input事件,扩展到组件构造器的options配置项中。

以上可以得知,组件上v-model指令的本质也是生成了value属性和input事件。

到此这篇关于Vue组件上的v-model双向绑定原理的文章就介绍到这了,更多相关Vuev-model双向绑定内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

您可能感兴趣的文章:

标签: vmodel双向绑定vmodel双向绑定原理Vue

上一篇:一文详解Java线程中的安全策略java...
下一篇:Studio实现简易计算器设计Android...


发布评论