如何命名vue组件

Question

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

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

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

   一个。其中含有单一评论（基本上这只是一个单一属性模板）

2. 多行文本发送评论（具有AJAX调用）

comments.vue拥有所有的逻辑来加载分页评论

所以我的问题是：这是很好的责任分离吗？

Answer 1

您可以检查此Vue.js Component Style Guide

从指南：

Vue的组件名称

每个组件的名称必须是：

• 有意义的：没有了具体的，而不是过分抽象。
• 短：2或3个字。
• 可说：我们希望能够谈论它们。

Vue的组件名称也必须是：

• 自定义元素遵循规范：包括一个连字符，不要使用保留 名。
• 应用程序名称空间：如果非常泛型，否则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 -->