知道了元件的基本概念，就可以來學習元件如何定義以及註冊。
Vue提供了元件系統方便使用者使用，只要註冊完元件，就可以在Vue的渲染區以自定義的標籤方法使用。

註冊元件

Vue元件依使用範圍分成局部元件及全域元件。

• 局部元件
  使用Option API-components註冊的元件為局部元件，註冊後只能在註冊的元件樣板裡使用。
  語法：

components:{
	元件名稱：定義元件,
}

• 全域元件
  使用Vue提供的component方法，全局註冊的元件是在整個Vue應用中都可用的，可以在任何地方使用，包括各種Vue實例和元件。

1. 語法（Vue2須在Vue實體建立前建立）：

Vue.component(元件名稱 , 定義元件);
var app=new Vue({
});

2. 語法（Vue3須在Vue實體建立後建立）：

var app=Vue.createApp({
});
app.component(元件名稱 , 定義元件);
app.mount('#app');

命名：
元件名稱也就是元件自定義標籤名稱，通常使用小寫字母加"-"命名。

基本定義與使用

註冊元件前，要先定義元件的資訊，並在註冊時帶入該資訊。

1. 語法（Vue2只能有一個根元素root element）：

template: `
<div class=”example”>
</div>`,

2. 語法（Vue3可以有多個根元素root element）：

template: `
<div class=”example”>
</div>`
<div class=”example”>
</div>`,

元件定義可以依照需求增加：

• data
• props：元件的屬性定義，可從父層接收資料。
• computed
• methods
• watch
• 勾子函數（hook functions）：每個元件也會進入生命週期，可以需求進行客製化處理。

全域註冊範例：

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

（my-component即為註冊的元件自定義標籤名稱）

<script>
   Vue.component('my-component',{
      template:'<p>這是元件全域註冊的內容</p>'
   });

   var app =new Vue({
       el:'#app',
       data:{},
   });
</script>

局部註冊範例：

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

<script>
  var vm = {
     template:'<p>這是元件局部註冊的內容</p>'
  }

  var app = new Vue({
      el:'#app',
      components:{
      'my-component':vm
      }
  });
</script>