Ant Design Vue 组件@chang绑定方法如何传递自定义参数
今天在写代码的时候遇到一个问题:
在嵌套标签中 外层使用了一个v-for循环去循环一个数组,当内层想要拿取index,并且使用value却发现value失效了!
html:<div v-for="(item, index) in items" :key="index"><div><a-select @change="changeValue(index)"><a-select-option value="1">1</a-select-option><a-select-option value="2">2</a-select-option></a-select></div></div>js:changeValue(value, index) {console.log(value, index)}这是后会打印 undefined 和index的值, 即回调参数value并没有拿到
下面介绍一下三种传参方式:
1. 仅使用回调参数
html:<a-select @change="changeValue"><a-select-option value="1">1</a-select-option><a-select-option value="2">2</a-select-option></a-select>js:changeValue(value) {console.log(value)}
2.仅使用自定义传入的参数
html:<div v-for="(item, index) in items" :key="index"><div><a-select @change="changeValue(index)"><a-select-option value="1">1</a-select-option><a-select-option value="2">2</a-select-option></a-select></div></div>js:changeValue(index) {console.log(index)}
3.使用回调参数+自定义参数
html:<div v-for="(item, index) in items" :key="index"><div><a-select @change="value => changeValue(value, index)"><a-select-option value="1">1</a-select-option><a-select-option value="2">2</a-select-option></a-select></div></div>js:changeValue(value, index) {console.log(value, index)}
通过 value=> function(value, params)这种形式就能够实现将两种类型的参数一同引用了。