博客

在使用UI框架的某些组件时，组件自身的点击、搜索等事件，往往都有默认参数。

// input中输入1
<a-input-search placeholder="输入页码" @search="searchPage">
  <a-button type="primary" slot="enterButton">跳转</a-button>
</a-input-search>

searchPage(val) {
  console.log(val)
  // 此时会打印结果为1，是input框中输入的值
}

有时候我们需要给这些事件添加额外参数。直接写就会覆盖原本默认参数。

// input中输入1
<a-input-search placeholder="输入页码" @search="searchPage('test1')">
  <a-button type="primary" slot="enterButton">跳转</a-button>
</a-input-search>

searchPage(val) {
  console.log(val)
  // 此时打印的值是test1，input框中输入的值没有打印，原本的默认参数被覆盖
}

有两种解决办法：

第一种： 使用 $event

事件调用函数的第一个实参写$event，后面根据需要添加额外参数。 $event方法只能解决一个默认参数的情况

// input中输入1
<a-input-search placeholder="输入页码" @search="searchPage($event, 'test1')">
  <a-button type="primary" slot="enterButton">跳转</a-button>
</a-input-search>

searchPage(val, a) {
  console.log(val, a)
  // 此时打印的值是1，test1
}

第二种：使用箭头函数

事件调用函数的形参写原本的默认参数（可以有多个），实参根据需要添加额外参数

<a-upload multiple :accept="accept" :show-upload-list="false"
  :before-upload="(file, fileList) => beforeUpload(file, fileList, 1)" :file-list="fileList">
  <a-button ref="upload" type="primary" :loading="uploadLoading" :disabled="uploadLoading">批量上传</a-button>
</a-upload>
 
beforeUpload(file, fileList, a) {
  console.log(file, fileList, a)
  // 此时打印的值是当前上传文件对象，上传的文件数组，1
}