浅谈 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 相关文章推荐
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
javascript操作cookie_获取与修改代码
May 21 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
JS验证码实现代码
Sep 14 Javascript
总结js函数相关知识点
Feb 27 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 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
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
简单实现python聊天程序
2018/04/01 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
Tensorflow 多线程设置方式
2020/02/06 Python
python实现交并比IOU教程
2020/04/16 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
广告学专业推荐信范文
2013/11/23 职场文书
销售副总经理岗位职责
2013/12/11 职场文书
婚礼新郎父母答谢词
2014/01/16 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
党员思想汇报材料
2014/12/19 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
Python基础知识之变量的详解
2021/04/14 Python
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server