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


Posted in Javascript onJune 08, 2017

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

我们来看一下它的效果:

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

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

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

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

如此神奇的效果是如何实现的呢? 还是参照官方文档

http://cn.vuejs.org/v2/guide/components.html#使用自定义事件的表单输入组件

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

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

  1. v-bind:绑定响应式数据
  2. 触发 input 事件 并传递数据 (核心和重点)

现在我们也想设计自己的表单组件,也想通过 v-model暴露组件的值,怎么做呢?

例如我们要设计一个 自定义货币输入的组件, 通过 v-model暴露组件的值,我们可能使用如下的组件代码

<currency-input v-model="price"></currency-input>

然后再使用 这个我们自己定义的组件时, 组件内部会暴露出 组件的值到 v-model所绑定的值中去;那它是如何实现的呢?\

要搞明白v-model的实现,需要通过查看官方的自定义v-model组件示例的部分代码来进行说明

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

我们看上图中的代码,有行  $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事件 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
5个javascript的数字格式化函数分享
Dec 07 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
Apr 13 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
Vue如何实现组件的源码解析
Jun 08 #Javascript
jquery Ajax实现Select动态添加数据
Jun 08 #jQuery
js canvas实现放大镜查看图片功能
Jun 08 #Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 #Javascript
微信小程序开发之map地图实现教程
Jun 08 #Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 #Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 #Javascript
You might like
转换中文日期的PHP程序
2006/10/09 PHP
php $_SERVER当前完整url的写法
2009/11/12 PHP
PHP遍历数组的几种方法
2012/03/22 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
Gird事件机制初级读本
2007/03/10 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
英文自荐信格式
2013/11/28 职场文书
创业计划书——互联网商机
2014/01/12 职场文书
小摄影师教学反思
2014/04/27 职场文书
社区服务活动总结
2014/05/07 职场文书
法人授权委托书样本
2014/09/19 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
毕业典礼致辞
2015/07/29 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
Golang 实现WebSockets
2022/04/24 Golang
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android