代码:
<ul class="rate-list">
<li>
<!-- TODO 补全 el-rate 属性 -->
送餐速度:<el-rate show-score="true" @change=changeSpeed($event) v-model="speed"></el-rate>
</li>
<li>
<!-- TODO 补全 el-rate 属性 -->
外卖口味:<el-rate show-score="true" @change=changeFlavour($event) v-model="flavour"></el-rate>
</li>
<li>
<!-- TODO 补全 el-rate 属性 -->
外卖包装:<el-rate show-score="true" @change=changePack($event) v-model="pack"></el-rate>
</li>
</ul>
/* TODO: 考生需要完成以下内容 */
methods: {
changeSpeed(e) {
this.speed = e
this.score()
},
changeFlavour(e) {
this.flavour = e
this.score()
},
changePack(e) {
this.pack = e
this.score()
},
score() {
if(this.speed && this.flavour && this.pack) {
this.$emit('change', {
speed: this.speed, // 送餐速度
flavour: this.flavour, // 外卖口味
pack: this.pack, // 外卖包装
})
}
}
}
知识点:
子组件可以使用 $emit,让父组件监听到自定义事件
//父组件
<div @父组件定义函数='function'></div>
function(子组件传递来的参数) {}
//子组件
this.$emit('父组件定义函数', 需要传递的参数)