element 如何在默认事件中增加自定义参数

前言

我们在使用一些 element 组件时，很多组件都有默认事件，这些默认事件通常会有一些默认参数以便于使用。

这些参数都是固定的，很有可能会不满足我们的业务需求，那么，我们就需要增加一些额外的参数了。

操作

这里用 带输入建议的 input 组件举例 <el-autocomplete>

这个组件有这样一个属性： fetch-suggestions

如果我们在使用时按照这样去传递参数，会覆盖默认的参数：

<!-- 错误做法-->
<!-- myArg1 和 myArg2 是自定义参数-->

<el-autocomplete
      v-model.trim="name"
      :fetch-suggestions="querySearch(myArg1, myArg2)"
  ></el-autocomplete>

正确的做法是使用闭包进行传参，这得益于 vue 可以给属性、方法、指令传入任意合法的 JavaScript 的语句：

<!-- 正确做法-->
<!-- queryString 和 cb 是默认参数-->
<!-- myArg1 和 myArg2 是自定义参数-->

<el-autocomplete
      v-model.trim="name"
      :fetch-suggestions="(queryString, cb) => { querySearch( queryString, cb, myArg1, myArg2 )}"
  ></el-autocomplete>

总结

使用闭包传参适用于所有的 vue 组件库，而且没有自定义参数个数限制。这对于我们抽象 element 这类开源库组件有非常好的帮助