浅析Vue自定义组件的v-model


Posted in Javascript onNovember 26, 2017

最近在学习vue,今天看到自定义事件的表单输入组件,纠结了一会会然后恍然大悟...官方教程写得不是很详细,所以我决定总结一下。

v-model语法糖

v-model实现了表单输入的双向绑定,我们一般是这么写的:

<div id="app">
   <input v-model="price">
 </div>
 new Vue({
   el: '#app',
   data: {
     price: ''
   }
 });

通过该语句实现price变量与输入值双向绑定

实际上v-model只是一个语法糖,真正的实现是这样的:

<input type="text" 


:value="price" 



@input="price=$event.target.value">

以上代码分几个步骤:

1.将输入框的值绑定到price变量上,这个是单向绑定,意味着改变price变量的值可以改变input的value,但是改变value不能改变price

2.监听input事件(input输入框都有该事件,当输入内容时自动触发该事件),当输入框输入内容就单向改变price的值

这样就实现了双向绑定。

自定义表单输入组件

我们平时写input可以不像上面那么复杂,直接用v-model就行了,但是既然我们研究这个语法糖那肯定是有别的用处,比如说自定义表单输入框组件。

<div id="app">
   <input-price v-model="price"></input-price>
 </div>
 Vue.component('input-price', {
   template: '<input type='text'>'
 });
 new Vue({
   el: '#app',
   data: {
     price: ''
   }
 });

上面的<input-price>是我们自定义的表单输入组件,我们能直接用v-model实现双向绑定吗?如果你觉得可以那你就是Too young了~

首先根据我们的v-model语法糖来看

1.我们的子组件(input-price)的value需要绑定一个从父组件传来的值,通过子组件的props接收
2.在子组件上有新的输入时需要触发父组件的input事件,并将新的值作为参数传递给父组件

<div id="app"> 
   <!-- <price-input v-model="price"></price-input> -->
 
   <!-- 手动实现了v-model双向绑定 -->
   <!-- 3、父组件的input事件被触发,将传来的值赋给父组件的变量price -->
   <!-- 4、父组件value的值绑定到price -->
   <price-input :value="price" @input="onInput"></price-input>
   <p>{{price}}</p>
 </div>
 Vue.component('price-input', {
   // 5、将父组件的value值通过props传递给子组件
   // 1、当有数据输入时触发了该组件的input事件
   template: '<input :value="value" @input="updateVal($event.target.value)" type="text">',
   props: ["value"], 
   methods: {
      updateVal: function(val) {
       // 2、手动触发父组件的input事件并将值传给父组件
       this.$emit('input', val); 
     }
   }
 });
 var app = new Vue({
   el: '#app',
   data: {
     price: ''
   },
   methods: {
      onInput: function(val) {
        this.price = val;
      }
    }
 });

这里备注了几个步骤:

1.当有数据输入时触发了该组件的input事件

2.手动触发父组件的input事件并将值传给父组件

3.父组件的input事件被触发,将传来的值赋给父组件的变量price,实现输入框value到父元素的price的单向绑定

4.父组件value的值绑定到price

5.将父组件的value值通过props传递给子组件,实现了父组件的price到子组件value的单向绑定

小小的总结一下:

•v-bind只能实现单向绑定
•v-model(v-bind+触发的input事件)实现双向绑定

以上所述是小编给大家介绍的浅析Vue自定义组件的v-model ,希望对大家有所帮助!

Javascript 相关文章推荐
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 Javascript
JS深入学习之数组对象排序操作示例
May 01 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 #Javascript
Javacript中自定义的map.js  的方法
Nov 26 #Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 #Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 #Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 #Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 #Javascript
zTree节点文字过多的处理方法
Nov 24 #Javascript
You might like
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
php去除数组中重复数据
2014/11/18 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
深入了解js原型模式
2019/05/30 Javascript
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
深入理解Python中各种方法的运作原理
2015/06/15 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
django Admin文档生成器使用详解
2019/07/22 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
python批量生成条形码的示例
2020/10/10 Python
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
幼儿园保育员岗位职责
2014/04/13 职场文书
防灾减灾活动总结
2014/08/30 职场文书
标准单位租车协议书
2014/09/23 职场文书
运动会100米广播稿
2015/08/19 职场文书
小学四年级作文之写景
2019/08/23 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
go语言中http超时引发的事故解决
2021/06/02 Golang