Recently I am writing a small web chat application, with a main interface and a chat page. The content is not complicated. The first time I tried to write with Vue, I divided the personal information at the head of the main interface, the list in the middle, the friend category switching at the bottom, and the text of the chat interface opened by clicking on the list item, the message panel, etc., all into separate components.
But this seems to cause more child-parent component communication. The leader said that I don’t need to write these in separate components. The idea of components is reuse, but I don’t need to reuse these. But when I look at demos on the Internet, different functional modules are separated into individual components.
So I hope you can help me figure out the logic, how to optimize the component segmentation of this chat function, and how to understand the idea of component reuse?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
My understanding is that since it is written as a component, it means that this component will be used in other places. Otherwise, there is no point in taking it out and it will cause more trouble for yourself. If you think the page has a lot of content, you can extract the css and js to write.