在开发过程中,难免需要给组件绑定的事件增加一些额外的参数,以此来满足项目需求,这里总结了两种解决办法及其优缺点。
方法一:
使用$event,新参数只能放在前后,即('新参数', $event),或者($event, '新参数'),注意,如果把新参数放在后边的话,写方法的时候,必须把原本所有参数都得列出来,不管用不用得到,不过写法简便。
<el-tree
ref="tree"
:data="treeData"
node-key="id"
@check="handleCheck"
@check-change="handleCheckChange('新参数', $event)" // 放前面
>
...
// @check-change事件自带三个参数, 具体查询element UI官网
handleCheckChange(str, nodeData, checked, indeterminate) {
console.log(str)
}
方法二:
在外层嵌套一个函数,然后在函数里接收原本自带的参数再加上新参数,这个方法就比较自由了,你可以决定保留几个原本自带的参数,也可以决定新参数放在哪个位置都可以!
<el-tree
ref="tree"
:data="treeData"
node-key="id"
@check="handleCheck"
@check-change="(nodeData, checked) => {handleCheckChange(nodeData, '新参数',checked)}" // 新参数可以放在任意位置
>
...
handleCheckChange(nodeData, str,checked) {
console.log(str)
}