1566人阅读
情景【Situation】：
编写通用的输入组件时，子组件要绑定到父组件的某个变量上dataA，当父组件要拿到自组件的值时不能通过this.$children.xxx取值然后付给dataA，
而是父组件可以直接this.dataA就可以取到当前子组件最新值。
任务【Task】：
实现在父组件直接this.dataA就可以取到当前子组件最新值。
行动【Action】：
首先要了解v-model这个指令，许多认真阅读过完整vue文档的同学可能已经知道了关于v-model。
v-model官方给出的说发是：这其实是一个简写的形式，v-model实际执行的是下面的绑定：
&input type=&text& v-bind:value=&dataA& v-on:input=&dataA = $event.target.value& /&
v-model是动态绑定值到value，然后监听input的inpit事件获取值后赋给dataA的一个过程。
在说一下input的value属性，在组件内部要定义一个value的props属性，以便能够动态绑定上父组件传过来的值；
组件内部还要做一件事情：
动态计算（获取和设置）currentValue的值，用到了vue的对象的get和set函数；
讲到这里，我们就可以解决上面的问题了；
首先定义一个通用输入组件：
1 Vue.component('my-component',{
template:'&div&&input type=&text& type=&text& v-model=&currentValue&/&&/div&',
data:function(){
// 双向绑定值-必须
currentValue:this.value
props:['value'],// 设置value为props属性-必须
computed:{
currentValue: {
// 动态计算currentValue的值
get:function() {
return this.
set:function(val) {
this.$emit('input', val);
在Html里绑定到vue实例的一个字段上；
1 &div id=&demo_01&&
&my-component v-for=&(val,key) in postData& v-model=&postData[key]&&&/my-component&
&button @click=&showValue&&打印对象值&/button&
实例里写一个方法
打印一下我们绑定的值；
1 var demo_01 = new Vue({
el:'#demo_01',
postData:{
name:'李雷',
describ:'这是一个传奇的人物'
showValue:function(){
console.log(this.postData)
是不是以后就不用繁琐冗长的this.$children.xxx取值方式了？
结果【Result】：
提供了有效的解决了关于输入类组件取值方案，并且已经部署实施。
总结：v-model是value和oninput事件的结合，可以动态地对value进行改变，就是如果value被改变了，可以很快地反映到对应的组件当中，改变该组件的value
访问：10023次
排名：千里之外
原创：64篇
转载：28篇
(1)(4)(26)(5)(23)(3)(19)(9)(2)4被浏览531分享邀请回答0添加评论分享收藏感谢收起如何理解vuejs2.0中的v-model_百度知道
如何理解vuejs2.0中的v-model
我有更好的答案
两个input都用v-model绑定了view，a的value为v-a，b的value值为v-b，如果没有指定value值或value值与component的子key对不上，则v-model没有效果。
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。Vue 官网教程上关于&v-model&的讲解不是十分的详细，写这篇文章的目的就是详细的剖析一下， 并介绍 Vue 2.2&v-model改进的地方，然后穿插的再说点 Vue 的小知识。
在 Vue 中，有许多方法和 Angular 相似，这主要是因为 Angular 是 Vue 早期开发的灵感来源。然而，Augular 中存在许多问题，在 Vue 中已经得到解决。
v-model 用在 input 元素上时
v-model虽然很像使用了双向数据绑定的 Angular 的&ng-model，但是 Vue 是单项数据流，v-model&只是语法糖而已：↓
&input v-model="sth" /&
&input v-bind:value="sth" v-on:input="sth = $event.target.value" /&
第一行的代码其实只是第二行的语法糖。然后第二行代码还能简写成这样：↓
&input :value="sth" @input="sth = $event.target.value" /&
要理解这行代码，首先你要知道&input&元素本身有个&&事件，这是 HTML5 新增加的，类似&onchange&，每当输入框内容发生变化，就会触发&oninput&，把最新的value传递给&sth。如果你不知道&&是从哪来的，那你需要点击它再复习一下文档。
我们仔细观察语法糖和原始语法那两行代码，可以得出一个结论：
在给 &input /& 元素添加 v-model 属性时，默认会把 value 作为元素的属性，然后把 'input' 事件作为实时传递 value 的触发事件
v-model 用在组件上时
v-model&不仅仅能在&input上用，在组件上也能使用，下面是一个和 Vue 官网教程类似的例子（在看这个例子时我们要考虑两个问题）：
实例演示.gif
父组件的&price&的初始值是 100，更改子组件的值能实时更新父组件的&price
如果你知道这两个问题的答案，那么恭喜你真正掌握了&v-model，如果你没明白，那么可以看下这段代码：↓
现在你知道&value&和&input&从哪来的了吧。与上面总结的类似：
给组件添加 v-model 属性时，默认会把 value 作为组件的属性，然后把 'input' 值作为给组件绑定事件时的事件名
v-model 的缺点和解决办法
在创建类似复选框或者单选框的常见组件时，v-model就不好用了。
&input type="checkbox" v-model="sth" /&
v-model&给我们提供好了&value&属性和&oninput&事件，但是，我们需要的不是&value&属性，而是&checked&属性，并且当你点击这个单选框的时候不会触发&oninput&事件，它只会触发&onchange&事件。这就尴尬了?
因为&v-model&只是用到了 input 元素上，所以这种情况好解决：↓
&input type="checkbox" :checked="status" @change="status = $event.target.checked" /&
当&v-model&用到组件上时：↓
&my-checkbox v-model="foo"&&/my-checkbox&
Vue.component('my-checkbox', {
tempalte: `&input
type="checkbox"
@change="$emit('input', $event.target.checked)"
:checked="value"
props: ['value'],
在 Vue 2.2 版本，你可以在定义组件时通过 mode l选项的方式来定制 prop/event：↓
&my-checkbox v-model="foo"&&/my-checkbox&
Vue.component('my-checkbox', {
tempalte: `&input
type="checkbox"
&!--这里就不用 input 了，而是 balabala--&
@change="$emit('balabala', $event.target.checked)"
:checked="value"
props: ['checked'], //这里就不用 value 了，而是 checked
prop: 'checked',
event: 'balabala'
学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群，我们一起学前端！
阅读(...) 评论()在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
使用了一个时间选择器插件，选择时间后，input中取v-model的值是空而value的值是正确的。刚学这个东西不久，请教一下问题的原因。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
解决了，调用了一下 vm.$set 方法
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
那得看这个插件怎么实现的了，按你的描述，这插件应该直接操作更改了input的DOM值，并没管vue的内部要求
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
要么用vm重新改写这个控件
要么用这个控件还是使用直接取值赋值的方式。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。}