浅析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 innerHTML 的一些问题的解决方法
Jun 22 Javascript
js中格式化日期时间型数据函数代码
Nov 08 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
详解Vue单元测试case写法
May 24 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
Python 条件判断的缩写方法
2008/09/06 Python
window下eclipse安装python插件教程
2017/04/24 Python
python实现电子产品商店
2019/02/26 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
新学期开学标语2015
2015/07/16 职场文书
教师师德工作总结2015
2015/07/22 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android