背景
目前是在复习vue原理的过程中，前端负责人知道我最近在复习vue，跟我说要我看组件上的v-model,我一听本来是不想放在心上的，刚好那天晚上没什么事干想看一下，毕竟负责人，还是要尊重一下，每想到这样一看，与我最近看的单向数据流，连起来了，哇！大佬就是大佬。。下面就让我们来看一下v-model吧！
v-model的作用？
这个问题一问：大家都会说是双向绑定，但是问题来了，他是双向绑定吗？答案是：NO,对确实v-model不是双向绑定，好我们来看官网怎么说的：v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理，看到了吗是语法糖，意思就是他其实就是一段代码的简写那么那段代码是什么呢？
其实v-model="username"代表的就是上面那一段代码，
<input type="text"
:value="username"
@input="username = $event.target.value"
>
//$event.target当前发生事件的对象不会冒泡.value的值撒花，我们已经明白了v-model这个语法糖了，对我想你们看到这里你们会认为好像懂了，其实昨天晚上我也是这样让为的呵呵，然而当我自己写一个在组件上的v-model的时候写了一个上午（在实习呵呵），到快中方吃饭的时候才想清楚了
要求
我们的要求是什么？就是我们自己写的组件可以像input（表单）一样写一个v-model那么那个数据就可以双向绑定（语法糖）。
遇到问题我们一定要把问题理解清楚，吧问题解析，那么我们就快解决了，所以才会有什么一直写不出来，在回家的路上，吃饭的时候吧问题想出来的情景，对吧
好了,我们先来分析问题什么情况下可以双向绑定（语法糖）
父向子传值：用props
子向父传值：用自定义事件传参数
好了看到这里其实问题就差不多了
我们还是分布写吧，这样看的会更加明白
<div id="app">
<btn-custom :value = 'total' @input = 'fatheron'></btn-custom>
</div>
new Vue({
el:'#app',
data() {
return {
total:"",
}
},
methods:{
fatheron:function(val){
//console.log(val);
total = val;
}
}
})这里是吧v-model语法糖拆开来了，并没有用v-model,这里的val参数就是我们的子组件传出来的参数event.target.value，那么整体的写法就是：
<div id="app">
<btn-custom :value = 'total' @input = 'fatheron'></btn-custom>
</div>
//定义一个组件btn-custom
Vue.component('btn-custom',{
props:['value'],
template:'<input type="text" :value = "value" @input="updata">',
methods: {
updata:function(event){
//console.log(value);
this.$emit('input',event.target.value); //绑定事件
}
},
});
new Vue({
el:'#app',
data() {
return {
total:"",
}
},
methods:{
fatheron:function(val){
//console.log(val);
total = val;
}
}
})其实这里就是说明了v-model他所谓的双向绑定其实就是单向数据流他就是父组件向（在new实例的过程之后，或值发生了改变）子组件传值，而子向父传值确说通过的事件传参数改变，这样的传递方式不可以说是双向绑定，因为子不可以通过prop把值给父亲
分析
其实问题应该是不难就是我当时就是关于value这个属性的问题想了半天？
1.input原本的value属性和：value属性的区别？ 答案是（：value）这个属性会覆盖
2.子input中的值当我们改变的时候，子input 上的值是我们先写上去的，然后因为，prop的改变，在由是父组件传过来的（在这篇位置的情况下我们写的值和prop中的值是一样的会没有视觉效果），因为如果prop中的值发生了改变，子input中的值会重新渲染成为prop中改变后的值。