鍍金池/ 問答/HTML5  HTML/ vue中能不能通過綁定不同的數(shù)據(jù)源來復(fù)用同一個組件？

vue中能不能通過綁定不同的數(shù)據(jù)源來復(fù)用同一個組件？

現(xiàn)在有一個列表頁面，列表是可搜索的，搜索后顯示的結(jié)果，因為除了數(shù)據(jù)源，搜索結(jié)果頁和列表頁一模一樣，所以能不能通過綁定不同的數(shù)據(jù)源來復(fù)用同一個組件，現(xiàn)在是有兩個組件，結(jié)果頁組件和列表頁組件除了數(shù)據(jù)源不一樣，其他的都相同，感覺這樣代碼重復(fù)的太多，就想著能不能復(fù)用，但是因為是vue新手，查了很多資料還是不行，所以想請教大神指點指點，非常感謝！

這是搜索前的列表頁：
clipboard.png

這是搜索后的結(jié)果頁

clipboard.png

組件代碼都是一樣的，顯得很累贅
這是篩選前列表組件代碼：

clipboard.png

這是篩選后結(jié)果頁的組件代碼：

clipboard.png

我是這樣綁的，但實際上并不行，運行后是這樣的：

clipboard.png

回答
編輯回答
櫻花霓

方案一：

列表頁和結(jié)果頁一個頁面，組件通過props渲染。

方案二：

vuex管理這個接口，頁面數(shù)據(jù)完全解藕，再map到頁面。

這種小需求我傾向方案一。

如果兩個頁面很大不一樣的需求，我傾向vuex。

2017年9月3日 05:51
編輯回答
柒喵

這完全就是一個頁面啊，只不過數(shù)據(jù)不一樣，改變一下數(shù)據(jù)不就ok了

2017年10月13日 19:49
編輯回答
舊城人

這跟vue都沒有任何關(guān)系了。

用戶輸入關(guān)鍵字，點搜索，列表頁查詢接口，顯示搜索結(jié)果；
用戶刪除關(guān)鍵字，點搜索，列表頁查詢所有數(shù)據(jù)（可以根據(jù)實際需求變更），顯示搜索結(jié)果。

實際上就是一個頁面，顯示不同結(jié)果。

2018年1月8日 10:54