最近在开发时遇到一个问题,应用 element-ui 组件库的 input-number 组件时,自定义其 @change 事件,@change 事件默认传入 newVal, oldVal 两个参数,能够用如下写法
<el-input-number @change="numberChanged" />
methods: {numberChanged(newVal, oldVal) {console.log(newVal, oldVal);
},
但如果此时,除默认参数 newVal, oldVal 外,须要再传递一个自定义参数 ar1 该如何解决。
首先思考到应用 $event,
<el-input-number @change="numberChanged(ar1, $event)" />
methods: {numberChanged(ar1, e) {console.log(ar1, e);
},
但此时 e=newVal,即默认的第一个参数,默认的第二个参数 oldVal 仍无奈传递。
网上也没有找到相应解决办法,VUE 自定义事件中,对于子组件传递多个参数的同时,父组件又要传递额定的参数的实际 给出了应用对象传递的办法,行将第一个默认参数和第二个默认参数合并成一个对象,只传递一个默认参数,但该办法不仅繁琐,而且局限性较大。
明天突发奇想到一个新的办法,如下:
<el-input-number @change="(newVal, oldVal) => {numberChanged(ar1, newVal, oldVal); }" />
methods: {numberChanged(ar1, newVal, oldVal) {console.log(ar1, newVal, oldVal);
},
相较之下显得简洁的多,故在此记录,供大家参考,也心愿集思广益,看有无新的更简洁的办法。