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>
複製代碼