v-model原理与模仿

v-model的原理非常简单，只要我改变了view的数据时，把数据传回vue的data中即可。
模仿v-model，我用到了父子组件之间的相互传值。
下面是代码
1.声明子组件

let v_input = {    
    props:['inputvalue'],
    //这里直接使用value不行，必须使用v-bind
    template:`<input type="text" v-on:input="$emit('change',$event.target.value)" v-bind:value='inputvalue'/>`
   }

$event是获取当前元素的方法
2.实例化vue

var app = new Vue({
    el:'#app',
    data:{
     post:{
      value:"哈哈"
     }
    },
    components:{
     'vinput':v_input
    },
    methods:{
     gochange:function(go){
      this.post.value = go;
     }
    }
   })

3.HTML中加入

<div id="app"><vinput v-bind:inputvalue='post.value' v-on:change='gochange'></vinput>{{post.value}}</div>

最后看一下效果

当我改变输入框中的值时

可以看到div中的值也发生了变化