鍍金池/ 問(wèn)答/HTML/ vue組件化開發(fā)中一個(gè).vue文件中的代碼太多了，有什么好的解決辦法？

vue組件化開發(fā)中一個(gè).vue文件中的代碼太多了，有什么好的解決辦法？

如何細(xì)拆組件，組件間通信代碼又會(huì)有很多，覺(jué)得得不償失，但是這個(gè)樣子，代碼有太多了，維護(hù)起來(lái)困難，

有什么好的解決辦法嗎，

頁(yè)面有五塊，這五塊互相引用，互相聯(lián)動(dòng)，這種情況下拆成組件的話是不是太麻煩了，組件間交互的代碼太多了

回答
編輯回答
兔寶寶

首先，你需要對(duì)組件進(jìn)行分類，結(jié)構(gòu)進(jìn)行調(diào)整。

建議將組件分為容器組件和展示型組件，容器組件承載數(shù)據(jù)和展示型組件，將數(shù)據(jù)通過(guò)屬性傳遞給展示型組件。
也就是說(shuō)結(jié)構(gòu)上需要調(diào)整為父子組件。

然后，你需要對(duì)組件職責(zé)進(jìn)行劃分，一個(gè)組件一個(gè)職責(zé)

這個(gè)需要根據(jù)你的具體項(xiàng)目來(lái)了。

最后，組件通信

組件劃分好了，那么就是組件怎么通信。之前在一個(gè)組件不存在這樣的問(wèn)題。
我覺(jué)得你的這種場(chǎng)景直接通過(guò)父子數(shù)據(jù)傳遞就可以搞定（父?jìng)鬟f子通過(guò)props，子到父通過(guò)事件）

希望我的回答對(duì)你有幫助。

2018年1月13日 03:30
編輯回答
風(fēng)畔

魚和熊掌不可兼得啊

還是細(xì)分組件通過(guò)props傳遞, 將props保存到子組件, 然后操作數(shù)據(jù)再通過(guò)emit再觸發(fā)回父組件吧

2018年7月12日 03:40
編輯回答
撥弦

組件間的交互太多通常是因?yàn)榻M件要負(fù)責(zé)的事情太多了，組件并不是那么純粹。一個(gè)頁(yè)面中有5塊相互交互，建議將這5塊封裝單獨(dú)的ui組件，將邏輯單獨(dú)抽離出來(lái)放在父級(jí)組件，由父級(jí)組件協(xié)調(diào)5塊的交互。

2017年9月14日 18:07