Vue.js 命名约定：'children' 个组件，共 single-instance 个组件

Question

我一直在努力遵守 Vue Style Guide 中提出的编码标准，但我不确定如何处理这种特殊情况。根据指南：

1. 应该只有一个活动实例的组件应该以 The 前缀开头，以表示只能有一个 (link)。
2. Child 与其 parent 紧密耦合的组件应包含 parent 组件名称作为前缀 (link)。

这些应该怎么结合？想象一个带有 single-instance header 的典型网页。在其中，我们将有许多 header 链接，特定于 header（它们不会出现在其他地方）。

如果我遵循 (1)，我的 header 组件将变为 TheHeader，但如果我也遵循 (2)，我将不得不命名我的 header 链接 TheHeaderLink。这是一种误导，因为通常会有多个。如果我删除链接的 The，我将失去按字母顺序列出耦合组件的好处。

相反，如果我将 The 替换为 header 并使用 AppHeader 和 AppHeaderLink，我就不再传达 header是单例。

我想这归结为个人偏好 and/or 编码团队标准，但也许有一些约定或解决方案我没有看到？

Answer 1

鉴于 Node.js 允许您 require 或 import folders as modules，我个人喜欢 "enclose" 或组织子组件（与它们紧密结合parent) 在一个独立的文件夹中，并为其提供一个入口点。

所以，我会从这个...

components/
|- TheHeader.vue
|- TheHeaderLink.vue
|- TheHeaderLogo.vue

...至于：

components/
|- TheHeader/
   |- index.vue
   |- HeaderLink.vue
   |- HeaderLogo.vue

index.vue 是（上述）入口点，基本上是您原来的 TheHeader 组件重命名。

当然你会像往常一样导入它：

import TheHeader from '@/components/TheHeader';
// or
const TheHeader = require('@/components/TheHeader');

但是，是的，我认为这只是一个偏好问题。