你真的知道组件中的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 ...
随机推荐
- fir.im Weekly - 如何在 iOS 上构建 TensorFlow 应用
本期 fir.im Weekly 收集了最近新鲜出炉的 iOS /Android 技术分享,包括 iOS 系统开发 TensorFlow 教程.iOS 新架构.iOS Notifications 推送 ...
- java spring mvc 全注解
本人苦逼学生一枚,马上就要毕业,面临找工作,实在是不想离开学校.在老师的教导下学习了spring mvc ,配置文件实在繁琐,因此网上百度学习了spring mvc 全注解方式完成spring的装配工 ...
- Springmvc的工作流程
1.向服务器发送http请求,请求被前端控制器DispatcherServlet捕获. 2.DispatcherServlet根据servlet.xml中的配置进行URL解析后,得到(URL),然后根 ...
- Excel基本操作1
Excel的基本操作之二,录入及快速填充.不足之处,欢迎补充
- Spring Boot快速建立HelloWorld项目
Spring Boot使我们更容易去创建基于Spring的独立和产品级的可以”即时运行“的应用和服务.支持约定大于配置,目的是尽可能快地构建和运行Spring应用. 构建环境 JDK 6+ Maven ...
- 走进javascript——类型
ECMAScript语言类型对应于使用ECMAScript语言的ECMAScript程序员直接操作的值.ECMAScript语言类型有以下几种Undefined,Null,Boolean,String ...
- javascript ES3小测试
一.温故知新 做做题,总是能有温故知新的体验.这套题是2010年的了,比较老了, http://perfectionkills.com/ 还有一套http://perfectionkills.com ...
- 中美HTML5市场发展的简单对比
1. HTML5的中美发展与应用对比 2014年下半年,HTML5在中国火了.个人用它开展自媒体,散播鸡汤:广告公司靠它做市场营销,从中获利:还有大公司的广告部.企业新媒体部或转型的媒体,利用它进行各 ...
- Docker - 容器直连
本文是在原文基础上的实际操作验证记录和细节补充. 默认情况下,容器连接到虚拟网桥docker0提供的虚拟子网中,容器之间通过默认网关(虚拟网桥docker0接口地址)建立连接. 如果不使用虚拟网桥,用 ...
- java web (j2ee)学习路线 —— 将青春交给命运
RESON TO DO JAVA WEB:1.JAVA WEB(企业级) 2.Android和iOS过于火爆并且不兼容 一.JAVA WEB开发需要的知识储备 1. 基本的网页设计语言:H ...