Vue中如何在组件内部实现一个双向数据绑定？

假设有一个输入框组件，用户输入时，同步父组件页面中的数据。

具体思路：父组件通过props传值给子组件，子组件通过 $emit 来通知父组件修改相应的props值，具体实现如下：

import Vue from 'vue'

const component = {
 props: ['value'],
 template: `
   <div>
     <input type="text" @input="handleInput" :value="value">
   </div>
 `,
 data () {
   return {
   }
 },
 methods: {
   handleInput (e) {
     this.$emit('input', e.target.value)
   }
 }
}

new Vue({
 components: {
   CompOne: component
 },
 el: '#root',
 template: `
   <div>
     <comp-one :value1="value" @input="value = arguments[0]"></comp-one>
   </div>
 `,
 data () {
   return {
     value: '123'
   }
 }
})

可以看到，当输入数据时，父子组件中的数据是同步改变的：

我们在父组件中做了两件事，一是给子组件传入props，二是监听input事件并同步自己的value属性。那么这两步操作能否再精简一下呢？答案是可以的，你只需要修改父组件：

 

template: `
   <div>
     <!--<comp-one :value1="value" @input="value = arguments[0]"></comp-one>-->
     <comp-one v-model="value"></comp-one>
   </div>
 `

v-model 实际上会帮我们完成上面的两步操作。