vue 项目中搜索出的数据如何处理？

Question

1.我在A组件写了一个搜索框。

在此组件触发查询的方法。

2.产生的数据在在B组件显示。

3.如何处理？

Answer 1

A组件拿到搜索参数=>ajax请求后台=>后台返回数据=>将数据传递给组件B

如果是一个页面同时调用A、B组件：

页面

//组件A
<A :on-search-change="onSearchChange"></A>
//组件B
<B :data="data"></B>

//组件A点击搜索触发onSearchChange，将搜索值传给页面
onSearchChange(search){
    this.param.search = search;
    //调用请求数据的方法
    this.getData();
},
//向后台请求数据
getData(){
    this.$http.get(url,{params:this.param}).then(res=>{
 //this.data就是传递给B组件的data，B组件什么都不用干，这里的data改变了，B组件的DATA也会变
        this.data = res.data.data;
    })
}

组件A：

<input v-model="param">
<button @click="search"></button>
//点击搜索传递input里面的参数给页面
search(){
    this.$emit('on-search-change',this.param);
}

组件B：

//仅作表示
<li v-for="i in data">{i}</li>

props:['data'],

Answer 2

用vuex存储搜索结果