Vue: 在自定义组件上使用 v-model

定义一个用于评分的 RatingControl.vue 组件，用户可以从 poor, average 和 great 3项中选择一项，如下所示：

如果在RatingControl.vue上定义属性'modelValue'，并发出名称为'update:modelValue'的事件，根组件App.vue同样可以使用 v-model 实现数据与事件的双重绑定。
RatingControl.vue：

<template>
    <ul>
        <li :class="{active: modelValue === 'poor'}"><button type="button" @click="activate('poor')">Poor</button></li>
        <li :class="{active: modelValue === 'average'}"><button type="button" @click="activate('average')">Average</button></li>
        <li :class="{active: modelValue === 'great'}"><button type="button" @click="activate('great')">Great</button></li>
    </ul>
</template>

<script>
export default {
    props: ['modelValue'],
    emits: ['update:modelValue'],
    methods: {
        activate(option) {
            this.$emit('update:modelValue', option);
        }
    }
}
</script>

App.vue:

<form>
    <!-- ............. -->
    <div class="form-control">
      <rating-control v-model="rating"></rating-control>
    </div>
    <div class="form-control"> 
      <input type="checkbox" id="confirm-terms" name="confirm-terms" v-model="confirm"/>
      <label for="confirm-terms">Agree to terms of use?</label>
    </div>
    <div>
      <button>Save Data</button>
    </div>
  </form>

使用这种方法，可以如同使用 input 元素一样使用自定义组件。