vue.js - 何时将 Vue 组件拆分为多个组件(子组件)

Question

在创建 Vue 组件时，如何决定何时将一个组件分离成具有多个子组件的父组件，而不是只拥有一个具有更多逻辑的组件？

我在非 SPA 网站的几个地方使用 Vue。在网站的一个页面上，我需要显示一个项目列表，每个项目旁边都有一些图标来执行一些简单的操作，例如显示/隐藏。我正在将列表构建为 Vue 组件，我们称之为 ProductList。但我不确定是否将该列表中的每个项目作为单独的组件。什么时候将一个组件拆分成多个子组件比较合适？

我自己的推理告诉我，应该只为需要能够独立的事物创建组件。由于这些项目不会在列表之外使用，因此将它们单独的 ProductListItem 组件放入 ProductList 组件中是没有意义的。我应该只拥有 ProductList 组件中的所有代码。对？

但是当我查看互联网上的其他示例时，其中许多示例讲述了一个不同的故事。例如，我记得看到一个示例，其中有一个 Article 组件、一个 ArticleTitle 组件、一个 ArticleBody 组件和一个 ArticleEnd 组件(或类似的东西)。文章组件的模板有 <article-title> , <article-body>和 <article-end>其中。如果ArticleTitle 组件或ArticleBody 组件仅在Article 组件内使用，而不是独立使用，为什么还要将它作为一个单独的组件呢？我在这里错过了什么吗？是否有技术标准来决定是否有多个组件或只是个人喜好？

Answer 1

有趣的问题，我认为这真的取决于开发人员，而且这一切都会变得同意不同意。但是，如果有帮助，我想分享我的经验:

在最优化的系统设计中，应该将其拆分为组件，因为这就是现代前端框架击败纯 html 编码(基于组件的编码)的原因。我们什么时候应该拆分组件，我认为Decade Moon 的回答说得很清楚。但是，我想写更多关于组件类型的内容:

1/查看组件(或哑组件):仅供展示，无数据流逻辑

2/控制组件(或智能组件):显示许多哑组件并包含数据流逻辑

3/容器(或 View ):包含很多控制组件，通常把服务端交互的逻辑放在这里(api调用，....)

当我们这样划分时，维护起来会更容易，因为我们更好地控制了数据的流动方式。

回到您的示例:产品列表就像一个控件组件，而列表项可能是一个 View 组件。因此，我实际上支持将它们分开的想法。

拆分组件会使目录结构变长，但是有了好的命名和过滤，我认为还是比代码行太多的单个文件组件要好。