vueui框架之elementUI--input输入框的属性 :fetch-suggestions="querySearchAsync"

起因是这样的，最近在使用vue+elementUi在模仿某些网站的页面。因为之前不经常使用UI框架去写页面，所以对一些东西比较好奇，所以想要看看是怎么回事。
然后在编写一个输入框的时候，主要需求是这样的：

• 一个输入框，输入框聚焦和有内容输入的时候，在输入框有个弹出列

那么，我找了elementUI上的这个输入框组件：如下图

组件对应的代码如下：

<el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearchAsync"
  placeholder="请输入内容"
  @select="handleSelect"
></el-autocomplete>
<script>
  export default {
    data() {
      return {
        restaurants: [],
        state: '',
        timeout:  null
      };
    },
    methods: {
      loadAll() {
        return [
          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" }
        ];
      },
      querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 3000 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        console.log(item);
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
  };
</script>

上面代码，大家都可以看懂。
下面进入正题：讲解一下:fetch-suggestions="querySearchAsync"这个属性
首先，看一下文档上的解释：如下图：

然后再结合代码看看：（这个代码是上面代码的一部分）：

<el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearchAsync"
  placeholder="请输入内容"
  @select="handleSelect"
></el-autocomplete>

querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 3000 * Math.random());
      }

实际上，到这一步呢，我们应该是会有疑问的。
:fetch-suggestions="querySearchAsync"要我们出一个函数类型的值（类似：querySearchAsync），但是querySearchAsync函数里面有两个参数queryString, cb；这两个参数实际上我们都没有传的啊？那么这两个是怎么来的呢？
带上这个问题，我就开始探索一下“新世界”
我是怎么“探索”的：

1. 打印一下，看看是“啥玩意”
   
   
   然后在输入框里面输入点文字：如下图：
   
   到这里，大家应该知道了，queryString是我们文本框里输入的内容。cb是一个函数

那么cb是会怎么样子呢？
我们来看看，我是直接点击我们打印的 f(){…},然后就出现下面的代码：如下图：

继续找,看看this.fetchSuggestions, 如下图：
相信到这里，大家就已经清晰明了了。
this.fetchSuggestions是一个注册属性，然后这个this.fetchSuggestions里面的参数是已经给我们写好的。我在传递的函数就直接操作这两个参数可以了，比如：可以直接通过queryString来发生异步数据请求，然后把请求回来的数据通过cb渲染到页面上。但是，cb里面传递的参数必须是一个数组，如果不是就会报错（不清楚请看上面的截图），而数组要传递的形式是如下：

[
	{
		"value": "aaa"
		"gg": "123",
		"lop": 3829
	},
	{
		"value": "bbb",
		"jj": "yuuhs",
		"gg": "ssxa"
	}
]

但是要在弹出列中显示数组中每个对象的哪个属性就得由value-key这个属性来决定，默认值是value如下图：

下面，我们来尝试使用这个属性：如下代码：
其他的都不变，只是在html中添加了value-key=“address”：

<template>
	<div>
		home
		<el-autocomplete
		v-model="state"

		value-key="address"
		
		:fetch-suggestions="querySearchAsync"
		placeholder="请输入内容"
		@select="handleSelect"
		></el-autocomplete>
	</div>
</template>

结果如下：

到这里，就是我所有的探究到的内容。
很高兴很大家做分享，也希望可以帮助到刚入门学习前端的朋友。
如果又大佬发现我的文章有错误的地方，还请帮忙指出，不吝赐教。
如需要转载，请备注。
最后，希望各位在学习路上的朋友，继续前行，保持终生学习的习惯。
祝大家工作顺利，身体健康