鍍金池/ 問答/HTML/ vue如何實(shí)現(xiàn)多組件排序？

vue如何實(shí)現(xiàn)多組件排序？

需求如下：

  • 搜素結(jié)果匯總頁面，需要展示5個(gè)相關(guān)醫(yī)院，5個(gè)相關(guān)醫(yī)生，5個(gè)相關(guān)病例，5個(gè)相關(guān)產(chǎn)品。

  • 這4個(gè)列表從上向下排列，但是順序是后臺(tái)配置的。即，可能是醫(yī)院列表在上，醫(yī)生列表在下，也可能想反。

  • 已有醫(yī)院組件，醫(yī)生組件，病例組件，產(chǎn)品組件，

怎么使用vue實(shí)現(xiàn)功能？

嘗試代碼：

<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>

問題

醫(yī)生組件的prop是doctor， 醫(yī)院的是 hospital,  如果使用了動(dòng)態(tài)組件，怎么向componet中傳入prop名？
回答
編輯回答
壞脾滊

建議用vuex來解決這個(gè)問題，在四個(gè)組件內(nèi)部獲取到 vuex 里的resultList，再根據(jù)需要獲取

2018年2月5日 12:51
編輯回答
兔囡囡

終于可以回答這個(gè)問題啦。我也遇到這種，還是可以通過父子組件傳值的，比如說子組件對(duì)應(yīng)的數(shù)據(jù)放在item.data里。然后外面寫上<component :is="item.componentName" v-for="(item, index) in items" :key="index" :data="item.data">
這樣有個(gè)問題，就是前提是items的格式是[{componentName: 子組件1名稱, data:子組件1的數(shù)據(jù)}, {componentName: 子組件2名稱, data:子組件2的數(shù)據(jù)}, ....]

要這樣的格式才行，如果你們后代是兩個(gè)接口，比如說組件順序一個(gè)，數(shù)據(jù)又是另外一個(gè)接口的。要自己拼接items這個(gè)list, 這樣的話還是建議上vuex

2017年8月22日 19:30