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 相关文章推荐
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
JS实现简单抖动效果
Jun 01 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 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
PHPAnalysis中文分词类详解
2014/06/13 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
php图像处理类实例
2015/07/28 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
js动态切换图片的方法
2015/01/20 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
浅析javascript的return语句
2015/12/15 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
Python制作爬虫采集小说
2015/10/25 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
美国宠物商店:Wag.com
2016/10/25 全球购物
审计工作个人的自我评价
2013/12/25 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
2014年党委工作总结
2014/11/22 职场文书
先进员工事迹材料
2014/12/20 职场文书
回复函格式及范文
2015/07/14 职场文书
医院消毒隔离制度
2015/08/05 职场文书