定义一个用于评分的 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 元素一样使用自定义组件。