Vue：V-model语法糖

v-model语法糖的使用

使用v-model来进行双向数据绑定的时：

<input v-model="something">

仅仅是一个语法糖：

<input v-bind:value="something" v-on:input="something=$event.target.value">

所以在组件中使用的时候，相当于下面的简写：

<custom v-bind:value="something" v-on:input="something = $event.target.value"></custom>

所以要组件的v-model生效，它必须：

• 接受一个 value 属性

• 在有新的value时触发input事件

对比：

<template>
  <InputNumber v-model="value" />
</template>
<script>
  import InputNumber from '../components/input-number/input-number.vue';

  export default {
    components: { InputNumber },
    data () {
      return {
        value: 1
      }
    }
  }
</script>

<template>
  <InputNumber :value="value" @input="handleChange" />
</template>
<script>
  import InputNumber from '../components/input-number/input-number.vue';

  export default {
    components: { InputNumber },
    data () {
      return {
        value: 1
      }
    },
    methods: {
      handleChange (val) {
        this.value = val;
      }
    }
  }
</script>