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

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

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)" />
相关推荐
黄毛火烧雪下几秒前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
三翼鸟数字化技术团队36 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
猿榜1 小时前
js逆向-喜某拉雅Xm-Sign参数解密
javascript
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Spark2381 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
Mintopia1 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia1 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js
随笔记1 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
樊小肆1 小时前
实战!从 0 到 1 搭建 H5 AI 对话页面
前端·vue.js
JiangJiang2 小时前
揭秘Vue3源码之computed:懒计算与缓存机制全解析
前端·vue.js·面试