uniapp 组件命名

uniapp 组件命名规范

在 uniapp 中，组件命名需遵循一定的规范以确保代码的可读性和一致性。以下是一些常见的命名规则和建议：

使用短横线命名法（kebab-case）

组件文件名和标签名应使用短横线命名法，即单词之间用短横线连接。例如：

• 组件文件名：my-component.vue
• 模板中使用：<my-component></my-component>

避免与 HTML 元素冲突

自定义组件名应避免与 HTML 原生标签（如 div、span）或 SVG 标签重名，以防止混淆。

语义化命名

组件名应具有语义化，能够清晰表达组件的功能或用途。例如：

• 按钮组件：custom-button.vue
• 弹窗组件：modal-dialog.vue

全局组件与局部组件

全局组件通常在 main.js 或 App.vue 中注册，命名时应具有唯一性，避免与其他组件冲突。局部组件可以在页面或组件内注册，命名范围较小。

多单词组件名

单文件组件的文件名应使用多单词命名（如 user-profile.vue），避免与 HTML 元素冲突。Vue 推荐使用多单词命名，除非是根组件 App.vue。

示例代码

// 全局注册组件
Vue.component('my-component', {
  // 组件选项
})

<!-- 使用组件 -->
<my-component></my-component>

遵循这些规范可以提高代码的可维护性和团队协作效率。