Vue中用v-model实现父组件和子组件之间的数据通信

在Vue中实现父子组件之间的数据通信，除了用传统的Props/emit还有sync外，还能使用v-model来实现（2.2.0 新增）。

类型：{ prop?: string, event?: string }

model允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

//parent
<my-checkbox v-model="foo" value="some value"></my-checkbox>

//children
Vue.component('my-checkbox', {
  model: {
    prop: 'counter',
    event: 'change'
  },
  props: {
    // this allows using the `value` prop for a different purpose
    value: String,
    // use `checked` as the prop which take the place of `value`
    counter: {
      type: Number,
      default: 0
    }
  },
  methods:{
  	fn(){
		this.$emit('change', this.counter+2)
	}
  },
  template: 'add counter'
  // ...
})

上面的代码相当于

<my-checkbox
  :counter="foo"
  @change="val => { foo = val }"
  value="some value">
my-checkbox>