高阶函数中框架使用心得之--方法中自定义传参(解决elementUI的select选择器远程搜索功能自定义参数)

高阶函数中框架使用心得之--方法中自定义传参(解决elementUI的select选择器远程搜索功能自定义参数)

  • 前言
    • 主题
    • 问题所在
    • 结束语

前言

你好! 我是一名前端攻城狮,这是第一次使用 Markdown编辑器 所展示的欢迎页。据说大牛的养成是要从有一个体面的博客开始,之前使用了新浪博客但是自己没怎么整理和发帖导致已经淹没在了宽阔的大海。希望在这能找到自己的一片小天地。

主题

话不多说,直接进入主题吧,进入主题前有个背景,上个星期,同事做了个需求功能需要使用select选择器的远程搜索功能,搜索的数据从后台拿,但有个场景必须得从这个远程搜索的方法中:remote-method拿到该select的输入值和自定义传值,

问题所在

那么问题就来了,到底怎样才能在钩子中获取到该select的输入值和自定义传值呢?看了源码发现:remote-method中的方法只能带一个默认的返回值那就是输入的值,不像@change事件中可以用如@change=“selHasChange($event,‘Custom value’)”,在selHasChange方法中就可以获取到select中选择到的值和自定义传的参数。所以一当有自定义传值那么remote-method中的value值就会丢失。和同事查了许久文件还是百思不得其解,情急之下就用了自定义传值然后用Dom的方式去找到该select的value值进行操作。但我知道这终归不是办法,这个问题一直在脑海中转,终于昨晚看到了一句话有了启发:高阶函数中可以返回一个匿名函数来访问内部变量可以在外部调用中获取到内部的变量值,而且每次调用完才会消失在栈内存中,所以就有了以下的解决办法
v-model=“value9”
multiple
filterable
remote
reserve-keyword
placeholder=“请输入关键词”
:remote-method="(val)=>remoteMethod(val,‘Custom value’)"
:loading=“loading”>



在vue的methods中
remoteMethod(val,val2){
//输出模糊搜索框的值 和 Custom value
console.log(val,val2);
},
先通过高阶函数return一个函数去接收当前的返回值value再通过这个return的方法去带自定义的值去操作,这个方法应该对所有返回值中自定义带值都有效,但是对于内存来说不太好,因为每次调用该方法这个函数都不会销毁。
然后就可以愉快地往下写代码啦,

结束语

然后这就是小弟的第一篇博客啦,写得不好,纵然心中有千丝万缕也写不出半句来。好苦,估计我已沉浸在自己的想法中自娱自乐了。

你可能感兴趣的:(高阶函数中框架使用心得之--方法中自定义传参(解决elementUI的select选择器远程搜索功能自定义参数))