改变组件默认上报事件的参数,添加额外参数

改变组件默认上报事件的参数,添加额外参数

vue 开发中时常会进行组件封装,稍微复杂点的组件通常会上报事件给父级组件

然而组件默认返回的参数可能不能满足业务场景需求,++而组件作为通用组件,也不适合做额外封装++

  • 往往这种时候,只是想在组件上报事件参数基础上添加额外参数,触发父组件的方法

++假设++我封装了一个卡片选择组件(主要是针对样式进行封装),点击卡片后,会通过事件上报当前点击的卡片 item 对象

然而这些卡片是循环渲染出来的,父组件在收到上报的事件后,还额外需要知道当前点击的是循环里的第几个卡片

直接写个匿名函数,将原有参数接收后传递给页面函数

@change="(value) => factorChange(value, item)"

html 复制代码
<el-select v-model="item.value" :placeholder="`请选择${item.factorsName}`"  @change="(value) => factorChange(value, item)">
  <el-option v-for="factorItem in item.detailList" :key="factorItem.id" :label="factorItem.remark" :value="factorItem.value">
    <div class="user-tag">{{ factorItem.remark }}</div>
  </el-option>
</el-select>

++或者++组件里面只需要一个标题,调用时也只给了一个标题,上报事件上报的也是标题,而父组件想要得到的是该项的整个数据对象

$event 也可以拿来代表原有参数

  • @submit="handleSubmit(item, $event)"
html 复制代码
<part-title @title-click="handleModuleClick(item, $event)" />
相关推荐
小光学长20 小时前
基于Vue的保护动物信息管理系统r7zl6b88 (程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
麦麦大数据21 小时前
F029 vue游戏推荐大数据可视化系统vue+flask+mysql|steam游戏平台可视化
vue.js·游戏·信息可视化·flask·推荐算法·游戏推荐
cecyci21 小时前
如何实现AI聊天机器人的打字机效果?
前端·javascript
paopaokaka_luck1 天前
基于SpringBoot+Vue的社区诊所管理系统(AI问答、webSocket实时聊天、Echarts图形化分析)
vue.js·人工智能·spring boot·后端·websocket
余道各努力,千里自同风1 天前
el-input 输入框宽度自适应宽度
javascript·vue.js·elementui
Southern Wind1 天前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
一大树1 天前
Vue3优化指南:少写代码,多提性能
vue.js
90后的晨仔1 天前
Webpack完全指南:从零到一彻底掌握前端构建工具
前端·vue.js
前端拿破轮1 天前
从0到1搭一个monorepo项目(一)
前端·javascript·git
90后的晨仔1 天前
Vue3项目全面部署指南:从构建到上线
前端·vue.js