Vue组件如何命名

Posted 2023-02-23

【中文标题】Vue组件如何命名

【英文标题】：How to name vue components

【发布时间】：2017-10-01 16:26:45

【问题描述】：

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

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

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

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

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

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

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

【参考方案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 -->