淺入深出Vue：組件

組件在 vue開發中是必不可少的一環，用好組件這把屠龍刀，就能解決很多問題。

組件是什麼

官方的定義：

• 組件是可複用的 Vue 實例，而且可帶有一個名字。

官方的定義已經很是簡明瞭，組件就是一個實例。

如何使用組件

在具體編寫組件實例代碼前，咱們先來以下幾個約定：

• 全部組件基於單文件組件，即一個 .vue文件就是一個組件

• data 必須爲一個函數

• template 節點下只能有一個子節點

約束很少，但最後兩個須要牢記在心。

基於單文件組件的前提下，一個組件的基本構造以下：

<template>
    <div>
        <!-- 頁面內容 -->
    </div>
</template>

<script>
export default {
    // 組件的邏輯，數據部分
}
</script>

<style>
 /** 樣式定義 **/
</style>

一個單文件組件由三個部分組成：

1. 頁面內容，即視圖部分，這部分是對數據的展現

2. 邏輯，數據定義部分，這部分是定義、控制數據

3. 樣式部分，服務於視圖

這三部分會在接下來的章節中一一實踐，在本篇中並不會給出具體的實例代碼。 本篇更側重於講清楚在寫組件以前應該要注意的地方。

組件的命名

在這裏向跑題的一點是：

• 不論是前端仍是後端仍是其餘方向，命名必定要重視，並能給出準確的、無歧義的、簡潔的命名

命名不只僅是爲了本身維護代碼，更多的是爲了團隊、協做開發以及交流。良好的命名會讓你的代碼更具可讀性，而良好的可讀性會讓你的代碼更具可維護性。綜上，但願童鞋們能認真命名，避免在項目中產出相似的命名：

var x = getSomething(y);

var somethingA = getSomethingB();

...

在這裏，vue官方是強烈建議遵循 W3C規範去爲組件命名的：

• 字母全小寫且分隔符使用連字符(短橫線)：-

固然你也可使用Pascal命名：

• 首字母大寫，無分隔符

可是在使用組件時，都是使用的 W3C規範。假設如今你有一個名稱爲 HelloWorld的組件，那麼如何在其餘組件中使用：

<hello-world></hello-world>

建議在命名時考慮如下因素：

• 詞要達意，言簡意賅，不要長篇大論

• 避免產生多義性

• 避免直接機翻中文，不少時候某些特有名詞或者是業務中提煉出來的詞並不適合直接機翻（機器翻譯）。對同一機翻詞彙，一百我的心中可能有一百種不一樣的解釋

• 參考優秀開源項目的命名規範

• 參考語言/框架所推薦的規範

• 同一項目中，對於同一個業務知識、名詞的翻譯儘量保持一致（一樣也是爲了不多義性）

在同一個項目中，儘量保持統一風格

組件的註冊

在另外一個組件中若是須要使用其它自定義組件，那首先是須要將組件註冊。

而註冊分爲：

• 局部註冊

• 全局註冊

局部註冊

局部註冊的用法：

<template>
    <div>
        <!-- 第三步： 在頁面中使用 -->
        <hello-world></hello-world>
    </div>
</template>

<script>

// 第一步：引入組件
import HelloWorld from 'your/component/path'

export default {

    // 第二步：在當前組件註冊此組件，註冊以後才能夠在頁面中使用
    components: [
        HelloWorld
    ]
}
</script>

上圖咱們能夠看到，在單文件組件中局部註冊的使用步驟：

• 1. 將組件引入
• 1. 在當前組件中註冊，這一步也就體現了局部二字，由於註冊後的做用域僅在當前組件內。
• 1. 在視圖中使用

全局註冊

若是這個 HelloWorld組件是常常要用的一個 UI組件怎麼辦，若是使用局部註冊那意味着每一個組件中都將存在第一步和第二步的重複代碼。

看見重複代碼，咱們應該造成一種想要幹掉它的本能。由於重複代碼屬於項目中的壞味道，會讓項目的總體質量降低，而且直接影響項目的可維護性和可擴展性。

想一想，當這個項目很是龐大，龐大到這個基礎組件已經被成百上千個組件引用了，哪天你要改這個組件的文件名或者移動路徑時，將是一場災難。

所以，在 vue中提供了全局註冊的辦法。只需註冊一次，剩餘組件中第一步和第二步的代碼就能夠直接刪掉，由於全局註冊以後能夠直接在視圖中使用。

// main.js 入口文件，在建立根實例以前將其註冊
import HelloWorld from 'your/component/path'

Vue.component('HelloWorld', HelloWorld)

new Vue({
    ...
})

可是這種手動全局註冊單個組件也存在一個問題：

• 不夠自動化，當組件數量繁多時，手動註冊組件就又成了一個負擔

這裏童鞋們能夠思考思考如何在 vue中實現自動全局註冊組件。

寫在後面

組件系統所包含的內容是至關豐富的，三言兩語很難說完整，所以這裏只提組件最基礎的使用和註冊以及在實踐中會遇到的問題。

下一篇將會詳細的說明子組件及在其上進行數據傳遞的相關知識，一樣，也是以理論爲主。也是做爲基礎篇的最後一篇~