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 相关文章推荐
js根据日期判断星座的示例代码
Jan 23 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
JS实现带阴历的日历功能详解
Jan 24 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
php字符串截取问题
2006/11/28 PHP
php 中文和编码判断代码
2010/05/16 PHP
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
php 使用array函数实现分页
2015/02/13 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
把input初始值不写value的具体实现方法
2013/07/04 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python引用传值概念与用法实例小结
2017/10/07 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
python爬虫容易学吗
2020/06/02 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
销售找工作求职信
2013/12/20 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
C++程序员求职信范文
2014/04/14 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
支教个人总结
2015/03/04 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
勇敢的心观后感
2015/06/09 职场文书
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS