Vue组件如何命名

Question

我有四个组件：comments.vue、comments-list.vue、comment.vue、comment-new.vue。

comments.vue使用其他组件显示：

1. cmets 列表（没有任何 ajax 调用）

   一个。其中包含单个注释（基本上它只是一个具有单个属性的模板）

2. 发送评论的文本区域（有 ajax 调用）

comments.vue 具有加载分页 cmets 的所有逻辑

所以我的问题是：职责分离好不好？

Answer 1

你可以查看这个Vue.js Component Style Guide

来自指南：

Vue 组件名称

每个组件名称必须是：

• 有意义：不过分具体，不过分抽象。
• 简短：2 或 3 个字。
• 可发音：我们希望能够谈论它们。

Vue 组件名称也必须是：

• 符合自定义元素规范：包括连字符，不要使用保留 名字。
• app- 命名空间：如果非常通用，否则 1 个单词，这样它就可以 很容易在其他项目中重复使用。

为什么？

名称用于传达有关组件的信息。所以它必须简短、有意义且可发音。

怎么做？

 <!-- recommended -->
<app-header></app-header>
<user-list></user-list>
<range-slider></range-slider>

<!-- avoid -->
<btn-group></btn-group> <!-- short, but unpronounceable. use `button-group` instead -->
<ui-slider></ui-slider> <!-- all components are ui elements, so is meaningless -->
<slider></slider> <!-- not custom element spec compliant -->