浅谈 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 相关文章推荐
js技巧--转义符&quot;\&quot;的妙用
Jan 09 Javascript
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
angular4自定义组件详解
Sep 28 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
Vue实现简单分页器
Dec 29 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 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备份/还原MySQL数据库的代码
2011/01/06 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
土木工程专业自荐信
2013/10/04 职场文书
音乐学个人的自荐书范文
2013/11/26 职场文书
军训心得体会
2013/12/31 职场文书
老公给老婆的道歉信
2014/01/10 职场文书
企业宣传方案
2014/03/04 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
2014年电工工作总结
2014/11/20 职场文书
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android