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>

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

• 將組件引入

• 在當前組件中注冊，這一步也就體現了局部二字，因為注冊后的作用域僅在當前組件內。

• 在視圖中使用

全局注冊

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

看見重復代碼，我們應該形成一種想要干掉它的本能。因為重復代碼屬于項目中的壞味道，會讓項目的整體質量下降，并且直接影響項目的可維護性和可擴展性。

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

因此，在 vue中提供了全局注冊的辦法。只需注冊一次，剩余組件中第一步和第二步的代碼就可以直接刪掉，因為全局注冊之后可以直接在視圖中使用。

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

Vue.component('HelloWorld', HelloWorld)

new Vue({
  ...
})

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

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

這里童鞋們可以思考思考如何在 vue中實現自動全局注冊組件。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Vue之組件的使用方法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!