改变组件默认上报事件的参数,添加额外参数
vue 开发中时常会进行组件封装,稍微复杂点的组件通常会上报事件给父级组件
然而组件默认返回的参数可能不能满足业务场景需求,而组件作为通用组件,也不适合做额外封装
- 往往这种时候,只是想在组件上报事件参数基础上添加额外参数,触发父组件的方法
假设我封装了一个卡片选择组件(主要是针对样式进行封装),点击卡片后,会通过事件上报当前点击的卡片 item 对象
然而这些卡片是循环渲染出来的,父组件在收到上报的事件后,还额外需要知道当前点击的是循环里的第几个卡片
直接写个匿名函数,将原有参数接收后传递给页面函数
@change="(value) => factorChange(value, item)"
<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)"
<part-title @title-click="handleModuleClick(item, $event)" />
如果想直接响应组件的事件,不关注组件内部的事情,可以直接加上 .native
事件修饰符
- (组件没有响应点击事件时,父页面直接给组件写
@click
,并不会触发点击事件)
<part-title @click.native="handleModuleClick(item)" />