vue 2.0组件与v-model详解


Posted in Javascript onMarch 27, 2017

前言

大家可能乍一看这个标题,可能会有疑问:v-model和组件也能扯到一起?在打算写这篇文章的时候,也是这么想的。咱们按简历的那一套STAR法则来梳理一下这篇文章:

情景【Situation】:

编写通用的输入组件时,子组件要绑定到父组件的某个变量上dataA,当父组件要拿到自组件的值时不能通过this.$children.xxx取值然后付给dataA,

而是父组件可以直接this.dataA就可以取到当前子组件最新值。

任务【Task】:

实现在父组件直接this.dataA就可以取到当前子组件最新值。

行动【Action】:

首先要了解v-model这个指令,许多认真阅读过完整vue文档的同学可能已经知道了关于v-model。

v-model官方给出的说发是:这其实是一个简写的形式,v-model实际执行的是下面的绑定:

<input type="text" v-bind:value="dataA" v-on:input="dataA = $event.target.value" />

v-model是动态绑定值到value,然后监听input的inpit事件获取值后赋给dataA的一个过程。

在说一下input的value属性,在组件内部要定义一个value的props属性,以便能够动态绑定上父组件传过来的值;

组件内部还要做一件事情:

动态计算(获取和设置)currentValue的值,用到了vue的对象的get和set函数;

讲到这里,我们就可以解决上面的问题了;

首先定义一个通用输入组件:

Vue.component('my-component',{
 template:'<div><input type="text" type="text" v-model="currentValue"/></div>',
 data:function(){
 return {
  // 双向绑定值-必须
  currentValue:this.value
 }
 },
 props:['value'],// 设置value为props属性-必须
 computed:{
 currentValue: {
  // 动态计算currentValue的值
  get:function() {
  return this.value;
  },
  set:function(val) {
  this.$emit('input', val);
  }
 }
 }
})

在Html里绑定到vue实例的一个字段上;

<div id="demo_01">
 <my-component v-for="(val,key) in postData" v-model="postData[key]"></my-component>
 <button @click="showValue">打印对象值</button>
 </div>

实例里写一个方法

打印一下我们绑定的值;

var demo_01 = new Vue({
 el:'#demo_01',
 data:{
 postData:{
  name:'李雷',
  age:'80',
  describ:'这是一个传奇的人物'
 }
 },
 methods:{
 showValue:function(){
  console.log(this.postData)
 }
 }
});

是不是以后就不用繁琐冗长的this.$children.xxx取值方式了?

结果【Result】:

提供了有效的解决了关于输入类组件取值方案,并且已经部署实施。

总结

以上就是关于vue2.0 组件和v-model的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的帮助。

Javascript 相关文章推荐
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
javascript学习(一)构建自己的JS库
Jan 02 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
小程序自定义轮播图圆点组件
Jun 25 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 #Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 #Javascript
javascript实现下雨效果
Mar 27 #Javascript
HTML的select控件美化
Mar 27 #Javascript
JS实现的点击表头排序功能示例
Mar 27 #Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 #Javascript
vue2.0实战之基础入门(1)
Mar 27 #Javascript
You might like
20个PHP常用类库小结
2011/09/11 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
常用js脚本
2006/12/03 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
JS中操作JSON总结
2020/12/06 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
微信小程序实现左右列表联动
2020/05/19 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
如何在django中添加日志功能
2020/02/06 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
大学生职业规划书的范本
2014/02/18 职场文书
家长建议怎么写
2014/05/15 职场文书
求职自我推荐信
2014/06/25 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
关于公司年会的开幕词
2016/03/04 职场文书