元件(Component)是Vue.js最強大的功能之一。元件可以擴充套件HTML元素，封裝可重用的程式碼。根據專案需求，抽象出一些元件，每個元件裡包含了展現、功能和樣式。每個頁面，根據自己所需，使用不同的元件來拼接頁面。這種開發模式使前端頁面易於擴充套件，且靈活性高，而且元件之間也實現瞭解耦。本文將詳細介紹Vue元件基礎用法

概述

　　在 Vue 裡，一個元件本質上是一個擁有預定義選項的一個 Vue 例項

　　元件是一個自定義元素或稱為一個模組，包括所需的模板、邏輯和樣式。在HTML模板中，元件以一個自定義標籤的形式存在，起到佔位符的功能。通過Vue.js的宣告式渲染後，佔位符將會被替換為實際的內容

　　下面是一個最簡單的模組示例

<div id="app">
    <xiaohuochai></xiaohuochai>
</d

註冊元件

　　元件註冊包括全域性註冊和區域性註冊兩種

【全域性註冊】

　　要註冊一個全域性元件，可以使用 Vue.component(tagName, options)

Vue.component('my-component', {
  // 選項
})

　　元件在註冊之後，便可以在父例項的模組中以自定義元素 <my-component></my-component> 的形式使用

　　[注意]要確保在初始化根例項之前註冊了元件

<div id="example">
  <my-component></my-component>
</div>

<script>
// 註冊
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 建立根例項
new Vue({
  el: '#example'
})
</script>

data資料

　　一般地，我們在Vue例項物件或Vue元件物件中，我們通過data來傳遞資料

<div id="example">
  <my-component></my-component>
  <my-component></my-component>
  <my-component></my-component>
</div>

<script>
// 註冊
Vue.component('my-component', {
  template: '<div>{{message}}</div>',
  data:{
      message: 'hello'
  }
})
// 建立根例項
new Vue({
  el: '#example'
})
</script>

　　執行上面的程式碼，會使Vue停止執行，並在控制檯發出錯誤提示，告訴你在元件中 data 必須是一個函式