浅谈 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 表格工具集
Apr 25 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
js友好的时间返回函数
Aug 24 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
封装一下vue中的axios示例代码详解
Feb 16 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
重置版宣传动画
2020/04/09 魔兽争霸
php Static关键字实用方法
2010/06/04 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
vue监听对象及对象属性问题
2018/08/20 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
python删除某个目录文件夹的方法
2020/05/26 Python
python创建文本文件的简单方法
2020/08/30 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
优秀英语专业毕业生求职信
2013/11/23 职场文书
物业管理毕业生个人的求职信
2013/11/30 职场文书
大学社团活动策划书
2014/01/26 职场文书
党支部先进事迹材料
2014/12/24 职场文书
总经理岗位职责范本
2015/04/01 职场文书
Python实现的扫码工具居然这么好用!
2021/06/07 Python
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis