vue中能不能通过绑定不同的数据源来复用同一个组件？

Question

现在有一个列表页面，列表是可搜索的，搜索后显示的结果，因为除了数据源，搜索结果页和列表页一模一样，所以能不能通过绑定不同的数据源来复用同一个组件，现在是有两个组件，结果页组件和列表页组件除了数据源不一样，其他的都相同，感觉这样代码重复的太多，就想着能不能复用，但是因为是vue新手，查了很多资料还是不行，所以想请教大神指点指点，非常感谢！

这是搜索前的列表页：

这是搜索后的结果页

组件代码都是一样的，显得很累赘
这是筛选前列表组件代码：

这是筛选后结果页的组件代码：

我是这样绑的，但实际上并不行，运行后是这样的：

Answer 1

这跟vue都没有任何关系了。

用户输入关键字，点搜索，列表页查询接口，显示搜索结果；
用户删除关键字，点搜索，列表页查询所有数据（可以根据实际需求变更），显示搜索结果。

实际上就是一个页面，显示不同结果。

Answer 2

方案一：

列表页和结果页一个页面，组件通过props渲染。

方案二：

vuex管理这个接口，页面数据完全解藕，再map到页面。

这种小需求我倾向方案一。

如果两个页面很大不一样的需求，我倾向vuex。

Answer 3

这完全就是一个页面啊，只不过数据不一样，改变一下数据不就ok了