Vue组件中的名称探究

调试Bug不是太难的事，更难的事是取名字，而如何取好一个名字就显得尤其重要。在Vue中，有多处涉及到组件名称的使用，各处的风格有框架内的既定要求。

原因

写这篇的原因是以前在编写UI库的时候，遇到了引入组件时名称不规范的问题。

在写测试用例时，有个测试用例一直没法经过，可是来回看了不少遍代码逻辑和实例使用都没有问题，惟独报了个组件名称错误，改动后再测试，果真如此。 在单文件组件中局部注册组件时，没有安装规范取名，而正确的应该是import WIcon from './icon'

import Wicon from './icon'
components: {Wicon}
复制代码

上面代码在语法上虽然没有问题，可是在使用会有问题，若是在template中像这样使用引入的组件<w-icon>， 测试用例是会报错的。

[vue warn] unknown custom element <w-icon>, did you resgister the components correctly?
For recursive components make sure to provide the "name" option
复制代码

官方建议

阅读了Vue文档中有关组件名的要求和建议后，罗列要点以下：

1. 组件名称中的两种风格

   组件名须要为多个单词（字母全小写且必须包含一个连字符，根组件以及<transition>``<component>之类的Vue内置组件除外）。这样作能够 避免跟现有的以及将来的HTML元素向冲突，由于全部的HTML元素名称都是单个单词的。

   a. kebab-case(短横线)(烤肉串)

   用短横线串联起各单词（是否是颇有烤肉串的感受），定义时使用kebab风格，在使用的时候也必须是kebab风格。 好比注册时Vue.component('my-component-name', { /* ... */ }), 使用时<my-component-name>。

   b. PascalCase(单词首字母大写)

   使用Pascal风格定义组件时，使用时两种命名风格均可以使用。好比注册时Vue.component('MyComponentName', { /* ... */ })， 使用则<my-component-name> 和 <MyComponentName>均可以。可是，若是直接在DOM(不是单文件组件中的<template>)中使用时只有kebab-case是有效的。 这一点，即使咱们不多直接HTML中使用组件，但仍是要注意下。(经测试，不会报错，但没法渲染对应组件)

   在局部注册时，对于 components 对象中的每一个 property 来讲，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。

   new Vue({
         el: '#app',
         components: {
           'component-a': ComponentA,
           'component-b': ComponentB
         }
       })
   复制代码

   但在使用用ES6以后，通常都是直接写成：

   new Vue({
         el: '#app',
         components: {ComponentA, ComponentB}
       })
   复制代码

   项目中和组件名称相关的几个地方，新建组件时Option中的name、注册组件时组件的名称、在使用组件时的标签名、在Vue Devtools中查看组件结构时的组件名称。

   以button组件为例，在入口文件中注册的w-button, 是供在template里使用组件时编写的。而在组件内部声明的name, 能够在vue-devtools中看到组件的名称，能够用来标识组件，但并不是惟一。

2. 对于标签名称的编写

   官方文档中风格指南里强烈推荐的写法是：

   a. 在单文件组件、字符串模板和JSX中没有内容的组件应该是自闭合的，但在DOM模板里永远不要这样作。 由于HTML 并不支持自闭合的元素（除了官方的空元素）。

   b. 对于绝大多数项目来讲，在单文件组件和字符串模板中组件名应该是PascalCase的，可是在DOM模板中老是kebab-case的。

   即以下是推荐的写法

   <!-- 在单文件组件、字符串模板和 JSX 中 -->
       <MyComponent/>
       <!-- 在 DOM 模板中 -->
       <my-component></my-component>
   复制代码

3. prop的风格

   在声明prop的时候，其命名应该始终使用camelCase，而在模板和JSX中应该始终使用kebab-case。在JavaScript中更天然的是camelCase， 而在HTML中则是kebab-case。

   props: {
         isShow: {
          type: Boolean       
         }
       }
   复制代码

   <Dialog is-show="false">
   复制代码