web蓝桥杯真题:外卖给好评

代码:

html 复制代码
<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>
javascript 复制代码
/* 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,让父组件监听到自定义事件

javascript 复制代码
//父组件
<div @父组件定义函数='function'></div>
function(子组件传递来的参数) {}
 //子组件
this.$emit('父组件定义函数', 需要传递的参数)        
相关推荐
令狐寻欢几秒前
HTML中 的 meta 标签常用属性及其作用
前端·html
SynthWriter6 分钟前
Trae 帮我生成了一个贪吃蛇的游戏,好玩儿
前端
超级土豆粉16 分钟前
JavaScript 标签加载
开发语言·javascript·ecmascript
用户214118326360219 分钟前
dify案例分享-Dify+RSS 聚合 8 大平台实时热点,新闻获取效率飙升 300%
前端
百锦再21 分钟前
Razor编程中@Html的方法使用大全
前端·html
啪叽24 分钟前
JavaScript可选链操作符(?.)的实用指南
前端·javascript
Ian在掘金24 分钟前
bat+python实现easy connect自动连接
前端·python
代码搬运媛27 分钟前
【react实战】如何实现监听窗口大小变化
前端·javascript·react.js
小桥风满袖29 分钟前
Three.js-硬要自学系列30之专项学习环境光
前端·css·three.js
Luckyfif32 分钟前
🤯由 性能指标 散发开来的 Performance API 被问爆了呀
前端·面试·性能优化