Vue如何創建組件

組件的概念

組件系統是Vue.js其中一個重要的概念，它提供了一種抽象，讓我們可以使用獨立可複用的小組件來構建大型應用，任意類型的應用界面都可以抽象爲一個組件樹：

每個組件都是相互獨立的，組件是需要創建和註冊之後才能使用的。註冊分爲全局註冊和局部註冊兩種方式。

全局註冊

語法

Vue.component('component-name', { 
	/* ... */ 
})

使用 Vue.component()方 法，可傳入2個參數，第一個參數是組件名稱，推薦使用(kebab-case)方式命名。

示例

<div id="app">
    <component-name></component-name> <!-- 以標籤形式使用組件 -->
</div>

<script>
    // 定義一個名爲 component-name 的新組件
    Vue.component('component-name', {
        //組件內容寫這裏
        template: "<div>這是一個全局組件</div>",
    })
    
    //聲明一個vue實例
    var vueApp = new Vue({
        el: '#app',
    })
</script>

注意事項

• 全局組件必須寫在Vue實例創建之前，纔在該根元素下面生效
• 模板裏面第一級只能有一個標籤，不能並行
• 組件中的data必須是函數
• 標籤嵌套會受到HTML規則的限制，如：<ul>，<ol>，<table>，<select>限制了能被它包裹的元素，而一些像<option>這樣的元素只能出現在某些其它元素內部

局部註冊

語法

var child={
  template:"<h1>我是局部組件</h1>"
};

new Vue({
  el: "#app1",
  components:{
    "child-component": child
  }
});

使用Vue實例中有個選項 components 註冊局部組件，註冊後就只在該實例作用域下有效

示例

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

var child = {
   template:"<button @click='add'>我是局部組件:{{m}}</button>",
   data:function(){
     return {m:1}
   },
   methods:{
     add:function(){
       this.m++
     }
   }
 };
 
 new Vue({
   el: "#app",
   components:{
     "child-component": child
   }
 })

注意事項

• 局部組件在調用的父組件進行註冊，只能在該作用域下使用
• 全局組件和局部組件一樣，data也必須是一個函數
• 標籤嵌套會受到HTML規則的限制，如：<ul>，<ol>，<table>，<select>限制了能被它包裹的元素，而一些像<option>這樣的元素只能出現在某些其它元素內部

想知道父子組件如何實現通信，請閱讀：《父子組件如何實現通信》

參考資料：
https://cn.vuejs.org/v2/guide/components-registration.html