我一直在尝试遵守Vue Style Guide中提出的编码标准,但是我不确定如何解决这种特殊情况。按照指南:
这些应如何结合?想象一个具有单实例标题的典型网页。在其中,我们将有一些特定于标题的标题链接(它们不会出现在其他位置)。
[如果我遵循(1),则标题组件将变为TheHeader
,但是如果我也遵循(2),则必须将标题链接命名为TheHeaderLink
。这是一种误导,因为通常会有不止一个。如果我删除链接的The
,则会失去按字母顺序列出的耦合组件的好处。
相反,如果我将标题的The
放下并与AppHeader
和AppHeaderLink
一起使用,则不再传达标题是单例的事实。
我想这可以归结为个人喜好和/或编码团队的标准,但也许我看不到某些约定或解决方案?
鉴于Node.js允许您require
或import
folders as modules,我个人喜欢在独立的文件夹中“封闭”或组织子组件(与父组件紧密耦合),并提供一个入口点。
所以,我将从这开始...
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');
但是,我认为这只是优先考虑的问题。