一、什么是組件

組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。

二、組件用法

組件需要注冊后才可以使用，注冊有全局注冊和局部注冊兩種方式。

2.1 全局注冊后，任何V ue 實例都可以使用。如：      

 <div id="app1">      <my-component></my-component>    </div>Vue.component('my-component',{  template: '<div>這里是組件的內容</div>'});var app1 = new Vue({  el: '#app1'});

 要在父實例中使用這個組件，必須要在實例創建前注冊，之后就可以用＜my-component></my- component> 的形式來使用組件了

template的DOM結構必須被一個元素包含， 如果直接寫成“這里是組件的內容”， 不帶“<div></ div ＞”是無法渲染的。（而且最外層只能有一個根的<div>標簽）

2.2 在Vue 實例中，使用component選項可以局部注冊組件，注冊后的組件只有在該實例作用域下有效。如：

    <div id="app2">      <my-component1></my-component1>    </div>var app2 = new Vue({  el: '#app2',  components:{   'my-component1': {     template: '<div>這里是局部注冊組件的內容</div>'   }  }}); 

2.3 data必須是函數

除了template選項外，組件中還可以像Vue實例那樣使用其他的選項，比如data 、computed 、methods等。但是在使用data時，和實例稍有區別， data 必須是函數，然后將數據return 出去。

    <div id="app3">      <my-component3></my-component3>    </div>Vue.component('my-component3',{  template: '<div>{{message}}</div>',  data: function(){    return {      message: '組件內容'    }  }});var app3 = new Vue({  el: '#app3'});

 一般return的對象不要引用外部的對象，因為如果return 出的對象引用了外部的一個對象， 那這個對象就是共享的， 任何一方修改都會同步。

所以一般給組件返回一個新的獨立的data對象。

補充：vue-router 組件復用問題

組件系統是Vue的一個重要組成部分，它可以將一個復雜的頁面抽象分解成許多小型、獨立、可復用的組件，通過組合組件來組成應用程序，結合vue-router的路由功能將各個組件映射到相應的路由上，通過路由的變化來告訴Vue要在哪里渲染他們，實現各個組件、各個頁面之間的跳轉導航。

問題

使用vue-router切換路由時會觸發組件樹的更新，根據定義的路由渲染一個新的組件樹，大致的切換過程是這樣的：

- 停用并移除不需要的組件
- 驗證切換的可行性
- 復用沒有進行更新的組件
- 啟用并激活新的組件