浅析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 相关文章推荐
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
js实现计时器秒表功能
Dec 16 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 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
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
Python 多进程原理及实现
2020/12/21 Python
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
中学生寄语大全
2014/04/03 职场文书
租房协议书范本
2014/04/09 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
关于教师节的广播稿
2014/09/10 职场文书
优秀护士事迹材料
2014/12/25 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
大学教师个人总结
2015/02/10 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
储备店长岗位职责
2015/04/14 职场文书
企业年会祝酒词
2015/08/11 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android