全局註冊：

　　要註冊一個全局組件，可以使用 Vue.component(tagName, options)。

　　註意確保在初始化根實例之前註冊組件：

html代碼：

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

JS代碼：

// 註冊
Vue.component(‘my-component‘, {
  template: ‘<div>A custom component!</div>‘
})

// 創建根實例
new Vue({
  el: ‘#example‘
})
 

渲染為：

<div id="example">
  <div>A custom component!</div>
</div>

局部註冊：

　　不必把每個組件都註冊到全局。可以通過某個 Vue 實例/組件的實例選項 components註冊僅在其作用域中可用的組件：

var Child = {
  template: ‘<div>A custom component!</div>‘
}

new Vue({
  // ...
  components: {
    // <my-component> 將只在父組件模板中可用
 

    ‘my-component‘: Child
  }
})

註意點：

　　一：DOM 模板解析註意事項

　　當使用 DOM 作為模板時 (例如，使用 el 選項來把 Vue 實例掛載到一個已有內容的元素上)，你會受到 HTML 本身的一些限制，因為 Vue 只有在瀏覽器解析、規範化模板之後才能獲取其內容。尤其要註意，像 <ul>、<ol>、<table>、<select> 這樣的元素裏允許包含的元素有限制，而另一些像 <option> 這樣的元素只能出現在某些特定元素的內部。在自定義組件中使用這些受限制的元素時會導致一些問題，例如：

<table>
  <my-row>...</my-row>
</table>

    自定義組件 <my-row> 會被當作無效的內容，因此會導致錯誤的渲染結果。變通的方案是使用特殊的 is 特性：

<table>
  <tr is="my-row"></tr>
</table>

　　二、data 必須是函數

var Child={
        template:‘<p>{{msg}}</p>‘,
        data:{
             msg:‘lizhao‘
        }
    }

　　當data時對象格式時，Vue 會停止運行，並在控制臺發出警告，告訴你在組件實例中 data 必須是一個函數。因為組件實例共享同一個 data 對象，修改一個變量會影響所有組件！我們可以通過為每個組件返回全新的數據對象來修復這個問題：

var Child={
        template:‘<p>{{msg}}</p>‘,
        data:function(){
            return{
                 msg:‘lizhao‘
            } 
        }
    }

Vue-Vue組件的註冊和使用