Vue之彻底理解自定义组件的v-model
最近在学习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">
以上代码分几个步骤:
- 将输入框的值绑定到price变量上,这个是单向绑定,意味着改变price变量的值可以改变input的value,但是改变value不能改变price
- 监听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语法糖来看
- 我们的子组件(input-price)的value需要绑定一个从父组件传来的值,通过子组件的props接收
- 在子组件上有新的输入时需要触发父组件的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;
}
}
});
这里备注了几个步骤:
当有数据输入时触发了该组件的input事件
手动触发父组件的input事件并将值传给父组件
父组件的input事件被触发,将传来的值赋给父组件的变量price,实现输入框value到父元素的price的单向绑定
父组件value的值绑定到price
将父组件的value值通过props传递给子组件,实现了父组件的price到子组件value的单向绑定
小小的总结一下:
- v-bind只能实现单向绑定
- v-model(v-bind+触发的input事件)实现双向绑定
如果大家有什么意见或建议希望大家在评论区多多交流,谢谢。
Vue之彻底理解自定义组件的v-model的更多相关文章
- 【vue】---- v-model在自定义组件中的使用
1. v-model简介 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定,它的本质是一个语法 ...
- vue中如何在自定义组件上使用v-model和.sync
自定义事件 tips 推荐始终使用 kebab-case 的事件名.(v-on会将事件名自动转换为小写,避免匹配不到) changeData × change-data √ 自定义组件的v-model ...
- vue.js2.0 自定义组件初体验
理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...
- Vue.extend提供自定义组件的构造器
Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器.经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元 ...
- 自定义组件v-model的实质性理解
用了几个月Vue一直很纠结自定义组件的v-model实现,最近开始学习React时,React中受控组件与状态提升的理念与v-model不谋而合. 转载请注明地址: https://www.cnblo ...
- 编程小白入门分享五:Vue的自定义组件
前言 上篇博客简单介绍了vue,本篇博客要在对vue有一定了解后,才可以比较容易理解自定义组件.想要封装好一个组件,一定要熟练掌握这三个技能,父组件 -> 子组件传值(props).子组件 -& ...
- vue初级学习--组件的使用(自定义组件)
一.导语 突然冒出四个字,分即是合,嗯,优点道理....................... 二.正文 在搞的仿淘宝demo,之前加入购物车是与商品详情一块的,今天把它单独拆出来,复用性高点,那这样 ...
- vue框架之自定义组件中使用v-model
通常 vue在html常见表单空间支持v-model双向绑定例如 <input v-model="message" placeholder="edit me&quo ...
- vue自定义组件中的v-model简单解释
在使用iview框架的时候,经常会看到组件用v-model双向绑定数据,与传统步骤父组件通过props传值子组件,子组件发送$emit来修改值相比,这种方式避免操作子组件的同时再操作父组件,显得子组件 ...
随机推荐
- 我的three.js学习记录(三)
此次的亮点不是three.js的3d部分,而是通过调用摄像头然后通过摄像头的图像变化进行简单的判断后进行一些操作.上篇中我通过简单的示例分析来学习three.js,这次是通过上一篇的一些代码来与摄像头 ...
- win10 uwp 绑定多数据
经常我们需要绑定的数据有多个,当添加到集合控件的对象类型结构比较复杂,我们希望自己来定义排版布局,这时可以使用ItemTemplate用资源的定义 现在有数据 public class caddres ...
- 初学者易上手的SSH-hibernate01环境搭建
这里我们继续学习SSH框架中的另一框架-hibernate.那么hibernate是什么?Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,使得Java程序 ...
- UVa 1608,Non-boring sequences
好诡异的一个题啊 紫书上关于从左边找还是从两边往中间找的讨论没有看懂,怎么一下就找到唯一的元素了(⊙_⊙?) 方法就是用的书上讲的方法,类似于uva 11572,不过这个题需要预处理存下两边的最近的相 ...
- Linux入门(15)——Ubuntu16.04安装codeblocks搭建C/C++的IDE环境
安装codeblocks: sudo add-apt-repository ppa:damien-moore/codeblocks-stable sudo apt-get update sudo ap ...
- C++基础知识1
1 初始C++ 1.1 编写一个简单的C++程序 1.1.1 程序结构 每个C++程序都包括一个或多个函数(function),但只有一个主函数main.操作系统通过调用 main来运行C++程序. ...
- Java基础总结--面向对象2
1.存在相关的多个方法就封装在一个类中,方法没调用到特有数据,需要静态化2.假如一个类所有方法都是静态方法,为了保证不被其他创建对象,可以将该类的构造方法私有化3.文档注释javadoc-按照规定注释 ...
- Memcached理解
一.Memcached简介: 1. Memcached是一个自由开源的,高性能的,分布式内存对象缓存系统. 2. Memcached是一种基于内存的key-value存储,用来存储小块的任意数据(字符 ...
- python自动化运维七:fabric
p { margin-bottom: 0.25cm; line-height: 120% } a:link { } p { margin-bottom: 0.25cm; line-height: 12 ...
- 使用Git 本地代码提交到 GitHub
第一步:下载Git 工具 在官网下载 https://git-scm.com/ 第二部:注册官方账号 创建一个村代码的仓库 注册地址https://github.com/ 第三部:本地代码 通过Git ...