vue~el-autocomplete实现组件化

el-autocomplete核心参数

可以实现异步的数据拉取，从异步返回的数据中，选择需要的结果，并回显到文本框中。

fetch-suggestions
回调列表，异步的方式获取数据列表，显示在列表框中

@select
当选中某一项时，会触发这个方法，将数据获取到，这时，我们可以将数据回显，或者赋值给父页面上的元素，如果希望赋值父页面上v-model绑定的元素，可以通过v-model原理中说的，绑定input事件，将当前值进行传递即可。

实例代码
子组件代码

父页面上引用它

import SearchLawfirmName from “@/components/SearchLawfirmName/index.vue”;
export default {
data() {
return {
allData:[
{ value: ‘result1’, label: ‘Result 1’ },
{ value: ‘result2’, label: ‘Result 2’ },
{ value: ‘result3’, label: ‘Result 3’ }
],
searchLawfirmName:null
}
}
}

上面代码中，我们通过import引入了自定义组件，再将组件选中的当前值赋给页面属性searchLawfirmName，我们将异步的数据列表allData通过allInfos参数进行传递。