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

最新推荐文章于 2024-09-19 11:09:26 发布

原创最新推荐文章于 2024-09-19 11:09:26 发布 · 171 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #ecmascript #前端框架

本文介绍了如何在Vue Element UI的el-autocomplete组件中，通过闭包方式传递自定义参数，避免覆盖默认行为，并强调了这种方法在处理开源组件时的优势。

前言

我们在使用一些 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>