組件在 vue開發(fā)中是必不可少的一環(huán)，用好組件這把屠龍刀，就能解決不少問題。

組件是什么

官方的定義：

• 組件是可復(fù)用的 Vue 實(shí)例，并且可帶有一個(gè)名字。

官方的定義已經(jīng)非常簡(jiǎn)明了，組件就是一個(gè)實(shí)例。

如何使用組件

在具體編寫組件實(shí)例代碼前，我們先來如下幾個(gè)約定：

• 所有組件基于單文件組件，即一個(gè) .vue文件就是一個(gè)組件
• data 必須為一個(gè)函數(shù)
• template 節(jié)點(diǎn)下只能有一個(gè)子節(jié)點(diǎn)

約束不多，但最后兩個(gè)需要牢記在心。

基于單文件組件的前提下，一個(gè)組件的基本構(gòu)造如下：

<template>  <div>    <!-- 頁(yè)面內(nèi)容 -->  </div></template><script>export default {  // 組件的邏輯，數(shù)據(jù)部分}</script><style> /** 樣式定義 **/</style>

一個(gè)單文件組件由三個(gè)部分組成：

1. 頁(yè)面內(nèi)容，即視圖部分，這部分是對(duì)數(shù)據(jù)的展示
2. 邏輯，數(shù)據(jù)定義部分，這部分是定義、控制數(shù)據(jù)
3. 樣式部分，服務(wù)于視圖

這三部分會(huì)在接下來的章節(jié)中一一實(shí)踐，在本篇中并不會(huì)給出具體的實(shí)例代碼。 本篇更側(cè)重于講清楚在寫組件之前應(yīng)該要注意的地方。

組件的命名

在這里向跑題的一點(diǎn)是：

• 不管是前端還是后端還是其他方向，命名一定要重視，并能給出準(zhǔn)確的、無歧義的、簡(jiǎn)潔的命名

命名不僅僅是為了自己維護(hù)代碼，更多的是為了團(tuán)隊(duì)、協(xié)作開發(fā)以及交流。良好的命名會(huì)讓你的代碼更具可讀性，而良好的可讀性會(huì)讓你的代碼更具可維護(hù)性。綜上，希望童鞋們能認(rèn)真命名，避免在項(xiàng)目中產(chǎn)出類似的命名：

var x = getSomething(y);var somethingA = getSomethingB();...

在這里，vue官方是強(qiáng)烈建議遵循 W3C規(guī)范去為組件命名的：

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

當(dāng)然你也可以使用Pascal命名：

• 首字母大寫，無分隔符

但是在使用組件時(shí)，都是使用的 W3C規(guī)范。假設(shè)現(xiàn)在你有一個(gè)名稱為 HelloWorld的組件，那么如何在其他組件中使用：

<hello-world></hello-world>

建議在命名時(shí)考慮以下因素：

• 詞要達(dá)意，言簡(jiǎn)意賅，不要長(zhǎng)篇大論
• 避免產(chǎn)生多義性
• 避免直接機(jī)翻中文，很多時(shí)候某些特有名詞或者是業(yè)務(wù)中提煉出來的詞并不適合直接機(jī)翻（機(jī)器翻譯）。對(duì)同一機(jī)翻詞匯，一百個(gè)人心中可能有一百種不同的解釋
• 參考優(yōu)秀開源項(xiàng)目的命名規(guī)范
• 參考語(yǔ)言/框架所推薦的規(guī)范
• 同一項(xiàng)目中，對(duì)于同一個(gè)業(yè)務(wù)知識(shí)、名詞的翻譯盡可能保持一致（同樣也是為了避免多義性）

在同一個(gè)項(xiàng)目中，盡可能保持統(tǒng)一風(fēng)格

組件的注冊(cè)

在另一個(gè)組件中如果需要使用其它自定義組件，那首先是需要將組件注冊(cè)。

而注冊(cè)分為：

• 局部注冊(cè)
• 全局注冊(cè)

局部注冊(cè)

局部注冊(cè)的用法：

<template>  <div>    <!-- 第三步： 在頁(yè)面中使用 -->    <hello-world></hello-world>  </div></template><script>// 第一步：引入組件import HelloWorld from 'your/component/path'export default {  // 第二步：在當(dāng)前組件注冊(cè)此組件，注冊(cè)之后才可以在頁(yè)面中使用  components: [    HelloWorld  ]}</script>

上圖我們可以看到，在單文件組件中局部注冊(cè)的使用步驟：

• 將組件引入
• 在當(dāng)前組件中注冊(cè)，這一步也就體現(xiàn)了局部二字，因?yàn)樽?cè)后的作用域僅在當(dāng)前組件內(nèi)。
• 在視圖中使用

全局注冊(cè)

如果這個(gè) HelloWorld組件是經(jīng)常要用的一個(gè) UI組件怎么辦，如果使用局部注冊(cè)那意味著每個(gè)組件中都將存在第一步和第二步的重復(fù)代碼。

看見重復(fù)代碼，我們應(yīng)該形成一種想要干掉它的本能。因?yàn)橹貜?fù)代碼屬于項(xiàng)目中的壞味道，會(huì)讓項(xiàng)目的整體質(zhì)量下降，并且直接影響項(xiàng)目的可維護(hù)性和可擴(kuò)展性。

想想，當(dāng)這個(gè)項(xiàng)目非常龐大，龐大到這個(gè)基礎(chǔ)組件已經(jīng)被成百上千個(gè)組件引用了，哪天你要改這個(gè)組件的文件名或者移動(dòng)路徑時(shí)，將是一場(chǎng)災(zāi)難。

因此，在 vue中提供了全局注冊(cè)的辦法。只需注冊(cè)一次，剩余組件中第一步和第二步的代碼就可以直接刪掉，因?yàn)槿肿?cè)之后可以直接在視圖中使用。

// main.js 入口文件，在創(chuàng)建根實(shí)例之前將其注冊(cè)import HelloWorld from 'your/component/path'Vue.component('HelloWorld', HelloWorld)new Vue({  ...})

但是這種手動(dòng)全局注冊(cè)單個(gè)組件也存在一個(gè)問題：

• 不夠自動(dòng)化，當(dāng)組件數(shù)量繁多時(shí)，手動(dòng)注冊(cè)組件就又成了一個(gè)負(fù)擔(dān)

這里童鞋們可以思考思考如何在 vue中實(shí)現(xiàn)自動(dòng)全局注冊(cè)組件。

寫在后面

組件系統(tǒng)所包含的內(nèi)容是相當(dāng)豐富的，三言兩語(yǔ)很難說完整，因此這里只提組件最基礎(chǔ)的使用和注冊(cè)以及在實(shí)踐中會(huì)遇到的問題。

下一篇將會(huì)詳細(xì)的說明子組件及在其上進(jìn)行數(shù)據(jù)傳遞的相關(guān)知識(shí)，同樣，也是以理論為主。也是作為基礎(chǔ)篇的最后一篇~

好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)武林網(wǎng)的支持。