深入解析Vue 组件命名那些事

下面我将为你详细讲解“深入解析Vue 组件命名那些事”的完整攻略。

1. 为什么需要规范化的组件命名

在创建Vue应用时，我们通常需要定义很多的组件。如果不加以规范化的组件命名，就会给在后续开发中造成很大的麻烦。比如：组件名与方法名重名、难于查找等情况。因此，规范化组件命名变得十分必要。

2. 组件命名规范

Vue官方定义了组件命名的规范，具体如下：

组件名称必须是多个单词组合；
组件名应该以父组件名为前缀命名，避免命名冲突，但根组件除外；
组件名应该使用大驼峰命名法（ PascalCase ）；
基础组件名可以以 base 、 app 或 v 开头；
应用特定的或无法分类的组件，可以直接使用一个简单的名字，使用大驼峰命名法。

具体来说，我们举两个例子：

<!-- 第一个例子 -->
<template>
  <div>
    <HeaderLogo />
    <HeaderMenu />
  </div>
</template>

<script>
import HeaderLogo from './HeaderLogo.vue'
import HeaderMenu from './HeaderMenu.vue'

export default {
  name: 'Header',
  components: {
    HeaderLogo,
    HeaderMenu
  }
}
</script>

上面的代码中，我们可以看到 Header 组合了两个单词，符合规范。同时，Header 也是其它组件的父组件，根据官方规定，前缀应该以父组件名为准，因此前缀为 Header 。此外，我们可以看到组件名采用了大驼峰命名法。

<!-- 第二个例子 -->
<template>
  <div>
    <Button />
  </div>
</template>

<script>
import Button from './Button.vue'

export default {
  name: 'HomePage',
  components: {
    Button
  }
}
</script>

上面的代码中，我们可以看到 HomePage 是一个单词，属于应用特定的或无法分类的组件，我们使用大驼峰命名法直接命名为 HomePage。