浅谈 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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
Jquery iframe内部出滚动条
Feb 11 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
jQuery 对Select的操作备忘记录
Jul 04 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
Vuex模块化应用实践示例
Feb 03 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/11/25 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
微信小程序动态增加按钮组件
2018/09/14 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
简单了解OpenCV是个什么东西
2017/11/10 Python
python判断数字是否是超级素数幂
2018/09/27 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
python实现TCP文件传输
2020/03/20 Python
基于FME使用Python过程图解
2020/05/13 Python
Keras设置以及获取权重的实现
2020/06/19 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
护理专业毕业生推荐信
2013/10/31 职场文书
村庄绿化方案
2014/05/07 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
个人自查自纠材料
2014/10/14 职场文书
2015年入党决心书
2015/02/05 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
干部培训简讯
2015/07/20 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
Elasticsearch 数据类型及管理
2022/04/19 Python
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS