你真的知道组件中的v-model吗?
v-model的神奇
html
<div id="app">
<input v-model="poin">
{{ poin }}
</div>
js
new Vue({
el:'#app',
data:{
poin:'zqz'
}
})
一旦我们输入的值发生变化,data中的poin值也会发生变化。
理论上data中的值发生变化是会出发事件的,但是我们没看见?
其实在vue的文档中有说明:
<input v-model="something">
是下面的语法糖
<input v-bind:value="something" v-on:input="something = $event.target.value">
每次我们输入的时候触发了input
事件,input绑定了内联函数,从而改变了something
的值。
你好奇input事件是什么?
当
<input>
或<textarea>
元素的值更改时,DOM input 事件会同步触发。(对于 type = checkbox 或 type = radio 的输入元素,当用户单击控件时,输入事件不会触发,因为value属性不会更改。) 此外,当内容更改时,它会在 contenteditable 的编辑器上触发。在这种情况下,事件目标是编辑主机元素。如果有两个或多个具有 contenteditable 的元素为真,“编辑主机”是其父级不可编辑的最近的祖先元素。同样,它也会在 designMode 编辑器的根元素上触发。
具体见:MDN的input事件
组件中的v-model
组件的v-model 生效原则
- 接受一个
value
属性 - 在有新的
value
时触发input
事件
我们先看一下代码
el-input.vue
<template>
<div>
<p>input的封装</p>
<input type="text"
ref="input"
:value="value"
@input="updateValue($event.target.value)"
@focus="selectAll"
>
</div>
</template>
<script>
export default {
name: 'el-input',
props: {
value: {
type: Number,
default: 0
},
},
methods: {
// 每次都会加一
updateValue (value) {
this.$refs.input.value = value + 1;
},
selectAll(event) {
setTimeout(function () {
event.target.select()
}, 0)
}
}
}
</script>
<style>
</style>
将这个组件在Tom.vue中使用
<style>
</style>
<template>
<!-- 在父组件中使用 -->
<div>
<v-el-input></v-el-input>
</div>
</template>
<script>
import vElInput from './el-input.vue'
export default {
name: 'tom',
components: {
vElInput
}
}
</script>
每次使用的时候都会在后面加个1
但是问题来了,我们要如何在Tom.vue中取到这个值呢?
方法一:使用事件 但是感觉有点曲线救国
方法二:使用v-model
这里就体现出了v-model的强大了,因为上面的语法糖,自动的绑定了input
事件。所以我们可以利用这个特性去做些事情。
给组件绑定v-model
将Tom.vue的代码修改一下
<template>
<!-- 在父组件中使用 -->
<div>
<v-el-input v-model="eleValue"></v-el-input>
eleValue的值:{{ this.eleValue }}
</div>
</template>
<script>
import vElInput from './el-input.vue'
export default {
name: 'tom',
components: {
vElInput
},
data () {
return {
eleValue: 666 //设置一个默认值
}
}
}
</script>
初始状态
输入后的状态
然后当我们输入的值发生变化的时,我们预想的eleValue
依旧没有发生变化,而el-input.vue中的value确发生了变化
也是就是说value发生变化后没有传递(同步)到父组件中,这也就是vue1中的.sync
的用处,而在vue2中已经废弃了。
修改el-input.vue代码,增加this.$emit('input', value*1)
...
updateValue (value) {
this.$refs.input.value = value + 1;
// 触发组件上绑定的input事件,以实现value同步
this.$emit('input', value*1)
},
...
这下就实现了值的同步问题。
你真的知道组件中的v-model吗?的更多相关文章
- react+dva 全局model中异步获取数据state在组件中取不到值
先上结论,不是取不到,是写法有问题. 全文分4部分,1是问题描述,2是一开始的解决想法(错误做法),3是问题产生原因的思考,4是正常解决方法.只想看结论直接跳4 1.问题描述 接触react dva一 ...
- Android(java)学习笔记186:对ListView等列表组件中数据进行增、删、改操作
1.ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V: view (显示的视图) C: controller 控制器 入门案例: acit ...
- Android(java)学习笔记129:对ListView等列表组件中数据进行增、删、改操作
1. ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V: view (显示的视图) C: controller 控制器 入门案例: aci ...
- 【转】你真的理解Python中MRO算法吗?
你真的理解Python中MRO算法吗? MRO(Method Resolution Order):方法解析顺序. Python语言包含了很多优秀的特性,其中多重继承就是其中之一,但是多重继承会引发很多 ...
- 在 Java EE 组件中使用 Camel Routes
摘要:你可以通过集成 Camel 和 WildFly 应用服务器(使用 WildFly-Camel 子系统)在 Java EE 组件中开始使用 Apache Camel Routes. [编者按]作者 ...
- .NET中 DAL+IDAL+Model+BLL+Web是什么意思
在.NET中 DAL+IDAL+Model+BLL+Web是什么意思 http://hi.baidu.com/hexiaojian/item/8d0c1a8e648546d75e0ec1e7 其实三层 ...
- 规避 React 组件中的 bind(this)
React 组件中处理 onClick 类似事件绑定的时候,是需要显式给处理器绑定上下文(context)的,这一度使代码变得冗余和难看. 请看如下的示例: class App extends Com ...
- vue 组件中this指向
今天开始学习慕课网的“去哪网”app开发,之前用学了一段时间对vue还是没有深刻理解透,先在开始要从新开始学习vue,今天学的第一堂课是vue 中v-model.v-for的简单例子,以前改变dom中 ...
- vue框架之自定义组件中使用v-model
通常 vue在html常见表单空间支持v-model双向绑定例如 <input v-model="message" placeholder="edit me&quo ...
随机推荐
- AspNetCore - MVC实战系列(一)
本章开篇先简单介绍下最近两周自己利用业余时间做的一个图片收集网站,当然这个是靠用户自己上传来收集不是去抓某些个网站的图片,那样没意义,这里我取名为“爱留图”:该网站的简单介绍大家可以参考下上篇的内容爱 ...
- Mobile game analysis
Let's take a look at a very popular mobile game "Garena 传说对决" . It would be very interesti ...
- 用惯了Task,你应该也需要了解它的内部调度机制TaskScheduler
平时我们在用多线程开发的时候少不了Task,确实task给我们带来了巨大的编程效率,在Task底层有一个TaskScheduler,它决定了task该如何执行,而在 .net framework中有两 ...
- 【代码学习】GD库中简单的验证码
大体思路: 代码部分: <?php //1.创建画布 $img = imagecreatetruecolor(100,30); //2.设置颜色 值越小,颜色越深 $color1 = image ...
- Object-C iOS纯代码布局 一堆代码可以放这里!
前言: 最近写的文章都是创业类,好吧,今天好好写写技术类的文章! 不过分享的不是IOS相关的文章,毕竟这几天在速成IOS,看的是object-c,由于速成的很快,好累! 好在现在基本已经入了点门道了, ...
- foreach底层机制
简单例子 直接了解foreach底层有些困难,我们需要从更简单的例子着手.下面上一个简单例子: public class Simple { public static void main(String ...
- .Net程序员学用Oracle系列(25):触发器详解
1.触发器理论 1.1.触发器的应用场景 1.2.触发器的类型 1.3.DML 触发器的触发顺序 2.触发器实战 2.1.创建触发器 2.1.1.创建 DML 触发器 2.1.2.创建 DDL 触发器 ...
- synchronized 修饰在 static方法和非static方法的区别
Java中synchronized用在静态方法和非静态方法上面的区别 在Java中,synchronized是用来表示同步的,我们可以synchronized来修饰一个方法.也可以synchroniz ...
- java虚拟机--jvm client模式与server模式的区别
JVM Server模式与client模式启动,最主要的差别在于:-Server模式启动时,速度较慢,但是一旦运行起来后,性能将会有很大的提升.JVM如果不显式指定是-Server模式还是-clien ...
- Spring——Web应用中的IoC容器创建(WebApplicationContext根应用上下文的创建过程)
基于Spring-4.3.7.RELEASE Spring的配置不仅仅局限在XML文件,同样也可以使用Java代码来配置.在这里我使用XML配置文件的方式来粗略地讲讲WebApplicationCon ...