场景
这是element-ui中的远程搜索组件,其中queryMethods是组件返回的查询方法,默认的有两个参数,queryMethods(keyword,callback), keyword是查询参数、callback是返回查询结果的回调函数。
如下:
<el-autocomplete
style="width:100%"
v-model="waybillAddr.waDeliveryAddrCompany"
value-key="addrCompany"
@select="handleSelectReceiveAddrCompany"
:fetch-suggestions="queryMethods"
placeholder="请输入内容"
></el-autocomplete>
需求
除了这两个默认的参数之外,我仍要传一个我需要的值到该函数中。
常规解决存在问题
<el-autocomplete
style="width:100%"
v-model="waybillAddr.waDeliveryAddrCompany"
value-key="addrCompany"
@select="handleSelectReceiveAddrCompany"
:fetch-suggestions="
queryMethods(keyword,cb,val)"
placeholder="请输入内容"
></el-autocomplete>
按照我们之前的做法,如上:
前两个是原本默认的参数,第三个是我想传入的额外的参数。但是运行之后发现在queryMethods中根本拿不到keyword和cb,报undefined,显然是不行的。
在我们传统的解决方式中,就是在默认值的后面直接加上我们需要传入的额外参数,在函数中就可以直接拿到。但是这种方式在这儿为什么不可以?
这个我们之前遇到大部分子组件返回的方法中,返回的大多都是数据。但是在改方法中返回的函数,有可能是这个导致了该方式不可用,大家可以在下方评论。
解决方案
采用行内函数的方式
<el-autocomplete
style="width:100%"
v-model="waybillAddr.waDeliveryAddrCompany"
value-key="addrCompany"
@select="handleSelectReceiveAddrCompany"
:fetch-suggestions="(keyword,cb)=>{ queryMethods(keyword,cb,val)}"
placeholder="请输入内容" >
</el-autocomplete>
经过小编亲身测试,可以完整的拿到这三个参数。
网友评论