淺入深出Vue：元件

若羽。發表於2019-07-09
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中實現自動全域性註冊元件。

寫在後面

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

下一篇將會詳細的說明子元件及在其上進行資料傳遞的相關知識，同樣，也是以理論為主。也是作為基礎篇的最後一篇~

相關文章