关于vue.js:VUE自定义事件传递默认参数同时传入自定义参数

35次阅读

共计 746 个字符,预计需要花费 2 分钟才能阅读完成。

最近在开发时遇到一个问题,应用 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); 
    },

相较之下显得简洁的多,故在此记录,供大家参考,也心愿集思广益,看有无新的更简洁的办法。

正文完
 0