v-model原理及自定义组件上的实现

一提到v-model就会想到数据的双向绑定，但其实现原理又是什么呢？

在原生表单中：

<input type="text" v-model="name">

相当于：(先给input绑定value属性值为数据name，然后给input绑定input事件将其input的value值赋给数据name

<input type="text" :value="name" @input="name = $event.target.value">

在自定义组件中：

要在字符串模板中使用上述的第二种方式来实现v-model。

<div id="demo">
   <test v-model="name"></test> 
   <input type="text" v-model="name" >
   <p>{{name}}</p>
   <button @click="ccc">按钮</button>
</div>

Vue.component("test",{
  //props 当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性
  //v-model 绑定的就是 input等表单元素的value、
  //因此此组件中的prop必为value
  props:['value'],
  template:`
  <input
  v-on:input="$emit('input', $event.target.value)"
  v-bind:value="value"
  >`
})

new Vue({
  el:"#demo",
  data:{
    name:"你好",
  },
  methods:{
    ccc:function(){
      this.name = "世界";
    }
  }
})