美文网首页
$emit返回多个参数(包含数据、函数),父组件拿不到对应数据或

$emit返回多个参数(包含数据、函数),父组件拿不到对应数据或

作者: 陈大事_code | 来源:发表于2019-04-23 14:38 被阅读0次

场景

这是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>

经过小编亲身测试,可以完整的拿到这三个参数。

相关文章

网友评论

      本文标题:$emit返回多个参数(包含数据、函数),父组件拿不到对应数据或

      本文链接:https://www.haomeiwen.com/subject/yusvgqtx.html