vue.js - 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 组件名称还必须是:

• 符合自定义元素规范:包括连字符，不要使用保留的名字。
• 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 -->