vue组件化开发中一个.vue文件中的代码太多了，有什么好的解决办法？

Question

如何细拆组件，组件间通信代码又会有很多，觉得得不偿失，但是这个样子，代码有太多了，维护起来困难，有什么好的解决办法吗，页面有五块，这五块互相引用，互相联动，这种情况下拆成组件的话是不是太麻烦了，组件间交互的代码太多了

Answer 1

组件间的交互太多通常是因为组件要负责的事情太多了，组件并不是那么纯粹。一个页面中有5块相互交互，建议将这5块封装单独的ui组件，将逻辑单独抽离出来放在父级组件，由父级组件协调5块的交互。

Answer 2

鱼和熊掌不可兼得啊

还是细分组件通过props传递, 将props保存到子组件, 然后操作数据再通过emit再触发回父组件吧

Answer 3

首先，你需要对组件进行分类，结构进行调整。

建议将组件分为容器组件和展示型组件，容器组件承载数据和展示型组件，将数据通过属性传递给展示型组件。
也就是说结构上需要调整为父子组件。

然后，你需要对组件职责进行划分，一个组件一个职责

这个需要根据你的具体项目来了。

最后，组件通信

组件划分好了，那么就是组件怎么通信。之前在一个组件不存在这样的问题。
我觉得你的这种场景直接通过父子数据传递就可以搞定（父传递子通过props，子到父通过事件）

希望我的回答对你有帮助。