vue如何实现多组件排序？

Question

需求如下：

• 搜素结果汇总页面，需要展示5个相关医院，5个相关医生，5个相关病例，5个相关产品。

• 这4个列表从上向下排列，但是顺序是后台配置的。即，可能是医院列表在上，医生列表在下，也可能想反。

• 已有医院组件，医生组件，病例组件，产品组件，

怎么使用vue实现功能？

尝试代码：

<div v-for="item in resultList" :key="item.name">
    <component :is="item.componentName" v-for="one in item.list" :key="one" :prop???="item.propName"></component>
</div>

问题

医生组件的prop是doctor， 医院的是 hospital,  如果使用了动态组件，怎么向componet中传入prop名？

Answer 1

终于可以回答这个问题啦。我也遇到这种，还是可以通过父子组件传值的，比如说子组件对应的数据放在item.data里。然后外面写上<component :is="item.componentName" v-for="(item, index) in items" :key="index" :data="item.data">
这样有个问题，就是前提是items的格式是[{componentName: 子组件1名称, data:子组件1的数据}, {componentName: 子组件2名称, data:子组件2的数据}, ....]

要这样的格式才行，如果你们后代是两个接口，比如说组件顺序一个，数据又是另外一个接口的。要自己拼接items这个list, 这样的话还是建议上vuex

Answer 2

建议用vuex来解决这个问题，在四个组件内部获取到 vuex 里的resultList，再根据需要获取