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">
   複製代碼