預先定義好的component可以包含：html元素(template)、綁定的資料(data)、方法(methods)跟偵聽(watch)....等等，用法很像Vue實例，優點是可以重複使用，維護上也更方便。

global component與 local component

使用Vue.component註冊的component為全域的component，任何Vue實例都可以使用，但要注意註冊component一定一定要在Vue實例之前；除此之外也可以註冊local component，存在vue實例裡，以下兩種不同用法範例：

global component

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

<script>
//component註冊要在Vue實例宣告之前
Vue.compoenet('my-component',{
  //data:{},
  tamplate:"<div>My Component</div>"
});

new Vue({
  el:"#app1",
});
new Vue({
  el:"#app2",
});
</script>

以Vue.component註冊，第一個參數為組件名稱，便可以在HTML以tag形式加入，渲染出tamplate的HTML內容

local component

new Vue({
  el:"#app",
  components:{
    'my-component':{
      template: '<div>My component</div>'
    }
  }
})

Vue component名字雖然沒有強制規範，但官方文件有提到如果可以遵照W3C的規範，例如名字全小寫，並用dash分開來，這樣可以避免與HTML元素互相衝突。