浅谈 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 相关文章推荐
jQuery学习5 jQuery事件模型
Feb 07 Javascript
jquery tab标签页的制作
May 10 Javascript
鼠标事件延时切换插件
Mar 12 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
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封装的数据库保存session功能类
2016/07/11 PHP
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
js中this的用法实例分析
2015/01/10 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
Python列表生成式与生成器操作示例
2018/08/01 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
实例详解Python装饰器与闭包
2019/07/29 Python
Python实现爬取并分析电商评论
2020/06/19 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
在线课程:Skillshare
2019/04/02 全球购物
高校辅导员推荐信范文
2013/12/25 职场文书
中年人生感言
2014/02/04 职场文书
运动会入场解说词
2014/02/07 职场文书
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
大学团日活动总结书
2015/05/11 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android