Vue 組件 - 在一個文件內組件的註冊與引入

組件的結構圖

組件的註冊
1.全局註冊：

**main.js** 
    Vue.component('my-component',{
          template:'<h1>全局組件</h1>'
    });

**index.html**
    <my-component></my-component>

2.局部組件

**main.js** 
var headerChild = {
    template:'<span>頭部組件中的內部組件</span>'
}

var header  = {
  template:'<h1>   
                  <header-child></header-child>     
                  頭部組件
            </h1>',
  components:{
    'header-child':headerChild
  }
}
//調用頭部組件，頭部組件自動調用裏面的組件
new Vue ({
  el:'#app',
  components:{
    'my-header':header
  }
})

**index.html**
<my-header></my-header>

注意：
在組件內使用data賦值，如果使用引用賦值就會造成全局污染。必須加return

    data:function () {
        return {
          word:'我愛甜甜'
        }
    }