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

組件是什么

官方的定義：

官方的定義已經非常簡明了，組件就是一個實例。

如何使用組件

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

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

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

<template>  <div>    <!-- 頁面內容 -->  </div></template><script>export default {  // 組件的邏輯，數據部分}</script><style> /** 樣式定義 **/</style>

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

頁面內容，即視圖部分，這部分是對數據的展示 邏輯，數據定義部分，這部分是定義、控制數據 樣式部分，服務于視圖

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

組件的命名

在這里向跑題的一點是：

命名不僅僅是為了自己維護代碼，更多的是為了團隊、協作開發以及交流。良好的命名會讓你的代碼更具可讀性，而良好的可讀性會讓你的代碼更具可維護性。綜上，希望童鞋們能認真命名，避免在項目中產出類似的命名：

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

在這里，vue官方是強烈建議遵循 W3C規范去為組件命名的：

當然你也可以使用Pascal命名：

但是在使用組件時，都是使用的 W3C規范。假設現在你有一個名稱為 HelloWorld的組件，那么如何在其他組件中使用：

<hello-world></hello-world>

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

在同一個項目中，盡可能保持統一風格