Vux - Search 组件使用总结

今天在使用 Vux 的search 组件的时候遇到了好几个不懂的地方，在这里就记下来，方便需要的人和自己以后复习使用!

引入和使用：

import { Search } from 'vux'

export default {
  components: {
    Search
  }
}

属性：

Search 组件属性.png

这里我只使用了 vlaue , results 这两个属性，其他的暂时没有用到。

这里 results 属性是用来绑定搜索结果列表结果的东西，他的存储形式如下：

[{title: 'hello', otherData: otherValue},{title:'hai',otherData: otherData},......]

每一个数组元素都是一个列表元素，例如我们把 results 属性设置为以下数值，那么它的显示效果就是：

 
<search :results="resultsList"></search>


data () {
     return {
        resultsList: [{title:'坐垫', id:1},{title:'床单',id:2}] 
     }
 }

Search-results属性.png

当然实际项目中，resultsList 的值应该是通过 vuex 在数据库中查询后再实时的动态更新到 resutlsList 中，也就是大概这个效果

Search-results-2.png

在使用这个组件的时候，我还遇到一个坑，那就是这个组件的事件触发一开始我没有找到如何触发先看该组件的事件有哪些：

Search-事件.png

这里我们主要使用@on-submit 提交事件，@on-change 搜索文字变化事件，@on-result-click 点击搜索列表事件

大概的逻辑是这样的，点击搜索框，输入搜索值，这时调用 @on-change 事件监听搜索框值的变化，然后向后

台发送搜索请求把搜索框的值发送过去，获取返回值，把值再赋予 前台的 resultsList 实时的改变搜索列表的值，

当点击搜索列表的时候，触发 @on-result-click 事件，把点击的列表所代表的数组元素传给父组件相应的方法，

例如点击 坐垫 然后把坐垫的值传给相应方法：

@on-result-click = 'clickList'

methods: {
    clickList(item) {
        alert(item.title) // 这里 item 是列表所代表的数组元素 {title:'坐垫',id:1}
    }
}

这样就能获取点击的列表的值，然后把获取到的值赋值给搜索框。这时候我们就需要触发表单提交事件去提交搜索的值，然后进行页面跳转。@on-submit

但是在这里我一开始以为触发提交事件就是点击 放大镜的图标，但是发现没有用，但是百度搜索也没有，后来想起来是不是 点击 enter 键也能触发，所以说这个 vux 文档能不能把仔细的地方仔细一点，我点了半天的放大镜，还以为是组件坏了呢。。。。。。。

这个时候我们就可以获取搜索框的值，然后向后台发送请求，获取结果，进行页面跳转

@on-submit = "sub"

methods: {
    sub(value) {
        alert(value) // 这里value 是搜索框的值
    }
}

终于这个 Seach 的搜索功能算走下来了。。。。。。。，文档看的真心累