[JavaScript知识库]Ant Design Vue 组件@chang绑定方法如何传递自定义参数

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）这种形式就能够实现将两种类型的参数一同引用了。