浅谈 Vue v-model指令的实现原理

站长资源 2025/1/13 佚名

72 1538 72

DDR爱好者之家 Design By 杰米

vue的v-model是一个十分强大的指令,它可以自动让原生表单组件的值自动和你选择的值绑定,

我们来看一下它的效果:

输入框的值和一个数据是绑定的,输入框的值变化,和他绑定的值也会发生变化

我们可以参照官方文档的例子 http://cn.vuejs.org/v2/guide/forms.html#文本

我们在手动输入 hello的过程中下面和他绑定的p标签的值也是实时变化的

如此神奇的效果是如何实现的呢"_blank" href="http://cn.vuejs.org/v2/guide/components.html" rel="external nofollow" >http://cn.vuejs.org/v2/guide/components.html#使用自定义事件的表单输入组件

官方也说明了,v-model只不过是一个语法糖而已,真正的实现靠的还是

"htmlcode">
```
<currency-input v-model="price"></currency-input>
```
然后再使用这个我们自己定义的组件时, 组件内部会暴露出组件的值到 v-model所绑定的值中去;那它是如何实现的呢"" src="/UploadFiles/2021-04-02/2017060816225048.png">

我们看上图中的代码,有行 $emit的代码,这行代码实际上会触发一个 input事件, 'input'后的参数就是传递给v-model绑定的属性的值,也就是说 v-model实现自定义的数据绑定的原理是这样的:

首先,大体的组件结构:
```
<custom-comp v-model="myattr">
  <input /> ??
  <select> ?? 
</custom-comp>
```
也就是自定义的组件内部一般包含原生的表单组件(当然非表单的组件也可以)

然后,给原生控件绑定事件,捕捉到原生组件的值,利用 $emit方法,触发input方法,组件监听到 input事件然后把值传入到myattr中.

这里有个疑问,为什么是 'input'呢??? 三个字,看文档!

这个就是 vue对 v-model实现的一个规则: 使用了v-model的组件会

自动监听 input 事件,并把这个input事件所携带的值传递给v-model所绑定的属性!这样组件内部的值就给到了父组件了

通过以上讲解,我们总结一下如何利用v-model实现自定义的表单组件:

监听原生组件的事件,当获取到原生组件的值后把值通过调用 $emit('input' ,data) 方法去触发 input事件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

v,model指令,vue,v,model,vue.js,v,model

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“浅谈 Vue v-model指令的实现原理”

暂无评论...

浅谈 Vue v-model指令的实现原理

jQuery Validate表单验证插件实现代码

Vue如何实现组件的源码解析

评论“浅谈 Vue v-model指令的实现原理”

更新日志

友情链接