自定义vue组件的v-model支持教程
made with Vuejs

尽管v-model是用于向原始组件添加双向数据绑定的强大资产，但是如何在自己的自定义组件中添加对v-model的支持并不总是显而易见。

要了解如何在组件中实现v模型支持，您需要了解其幕后工作方式。尽管看起来很神奇，但v-model=”syncedProp”实际上是:value=”syncedProp” @input=”syncedProp = arguments[0]”（或:value=”syncedProp” @input=”syncedProp = $event.target.value”）的简写。

因此，与v-model兼容的所有组件所需要做的就是接受:value属性，并在用户更改值时发出@input事件。

<template>
  <div class="date-picker">
    Month: <input type="number" ref="monthPicker" :value="value.month" @input="updateDate()"/>
    Year: <input type="number" ref="yearPicker" :value="value.year" @input="updateDate()"/>
  </div>
</template>

<script>
export default {
  props: ['value'],

  methods: {
    updateDate() {
      this.$emit('input', {
        month: +this.$refs.monthPicker.value,
        year: +this.$refs.yearPicker.value
      })
    }
  }
};
</script>