[TOC] ## 使用組件 ### 注冊 我們可以通過以下方式創建一個 Vue 實例： ~~~ new Vue({ el: '#some-element', // 選項 }) ~~~ 要注冊一個全局組件，你可以使用 Vue.component(tagName, options)。 例如： ~~~ Vue.component('my-component', { // 選項 }) ~~~ 組件在注冊之后，便可以在父實例的模塊中以自定義元素 <my-component></my-component> 的形式使用。要確保在初始化根實例 之前 注冊了組件： ~~~ <div id="example"> <my-component></my-component> </div> ~~~ ~~~ // 注冊 Vue.component('my-component', { template: '<div>A custom component!</div>' }) // 創建根實例 new Vue({ el: '#example' }) ~~~ >[info] 完整代碼示例： ~~~ <div id="example"> <my-component></my-component> </div> <script type="text/javascript"> // 注冊 Vue.component('my-component', { template: '<div>A custom component!</div>' }) // 創建根實例 new Vue({ el: '#example' }) </script> ~~~ 渲染為： ~~~ <div id="example"> <div>A custom component!</div> </div> ~~~ 效果如圖：  ### 局部注冊 不必在全局注冊每個組件。通過使用組件實例選項注冊，可以使組件僅在另一個實例/組件的作用域中可用： ~~~ var Child = { template: '<div>A custom component!</div>' } new Vue({ // ... components: { // <my-component> 將只在父模板可用 'my-component': Child } }) ~~~ >[info] 完整代碼示例： ~~~ <script type="text/javascript"> new Vue({ el:'#example', components: { 'my-component':{ template: '<div>A custom component!</div>' } } }) </script> ~~~ 這種封裝也適用于其它可注冊的 Vue 功能，如指令。 ### DOM模板解析說明 當使用 DOM 作為模版時（例如，將 el 選項掛載到一個已存在的元素上）, 你會受到 HTML 的一些限制，因為 Vue 只有在瀏覽器解析和標準化 HTML 后才能獲取模版內容。尤其像這些元素 `<ul> `，`<ol>`，`<table>` ，`<select>` 限制了能被它包裹的元素， 而一些像 <option> 這樣的元素只能出現在某些其它元素內部。 在自定義組件中使用這些受限制的元素時會導致一些問題，例如： ~~~ <table> <my-row>...</my-row> </table> ~~~ 自定義組件 <my-row> 被認為是無效的內容，因此在渲染的時候會導致錯誤。變通的方案是使用特殊的 is 屬性： ~~~ <table> <tr is="my-row"></tr> </table> ~~~ >[info]完整代碼示例： ~~~ <div id="app"> <table border="1" cellpadding="5" cellspacing="0"> <my-row></my-row> <tr is="my-row"></tr> </table> </div> <script type="text/javascript"> new Vue({ el:'#app', data:{ message:'前端研習社' }, components:{ myRow:{ template:'<tr><td>123456</td></tr>' } } }); </script> ~~~  應當注意，如果您使用來自以下來源之一的字符串模板，這些限制將不適用： - <script type="text/x-template"> - JavaScript內聯模版字符串 - vue 組件 因此，有必要的話請使用字符串模版。 ### data必須是函數 通過Vue構造器傳入的各種選項大多數都可以在組件里用。 data 是一個例外，它必須是函數。 實際上，如果你這么做： ~~~ Vue.component('my-component', { template: '<span>{{ message }}</span>', data: { message: 'hello' } }) ~~~ 那么 Vue 會停止，并在控制臺發出警告，告訴你在組件中 data 必須是一個函數。理解這種規則的存在意義很有幫助，讓我們假設用如下方式來繞開Vue的警告： ~~~ <div id="example-2"> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter> </div> ~~~ ~~~ var data = { counter: 0 } Vue.component('simple-counter', { template: '<button v-on:click="counter += 1">{{ counter }}</button>', // 技術上 data 的確是一個函數了，因此 Vue 不會警告， // 但是我們返回給每個組件的實例的卻引用了同一個data對象 data: function () { return data } }) new Vue({ el: '#example-2' }) ~~~ >[info] 完整代碼示例： ~~~ <div id="example-2"> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter> </div> <script type="text/javascript"> var data = { counter: 0 } Vue.component('simple-counter', { template: '<button v-on:click="counter += 1">{{ counter }}</button>', // 技術上 data 的確是一個函數了，因此 Vue 不會警告， // 但是我們返回給每個組件的實例的卻引用了同一個data對象 // data: { // message: 'hello' // } data: function () { return data } }) new Vue({ el: '#example-2' }) </script> ~~~ 演示效果如圖：  由于這三個組件共享了同一個 data ， 因此增加一個 counter 會影響所有組件！這不對。我們可以通過為每個組件返回全新的 data 對象來解決這個問題： ~~~ data: function () { return { counter: 0 } } ~~~ 現在每個 counter 都有它自己內部的狀態了： >[info] 完整代碼示例： ~~~ <div id="example-2"> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter> </div> <script type="text/javascript"> var data = { counter: 0 } Vue.component('simple-counter', { template: '<button v-on:click="counter += 1">{{ counter }}</button>', // 技術上 data 的確是一個函數了，因此 Vue 不會警告， // 但是我們返回給每個組件的實例的卻引用了同一個data對象 // data: { // message: 'hello' // } // data: function () { // return data // } data: function () { return { counter: 0 } } }) new Vue({ el: '#example-2' }) </script> ~~~ 演示效果如圖：  ### 構成組件 組件意味著協同工作，通常父子組件會是這樣的關系：組件 A 在它的模版中使用了組件 B 。它們之間必然需要相互通信：父組件要給子組件傳遞數據，子組件需要將它內部發生的事情告知給父組件。然而，在一個良好定義的接口中盡可能將父子組件解耦是很重要的。這保證了每個組件可以在相對隔離的環境中書寫和理解，也大幅提高了組件的可維護性和可重用性。 在 Vue.js 中，父子組件的關系可以總結為 props down, events up 。父組件通過 props 向下傳遞數據給子組件，子組件通過 events 給父組件發送消息。看看它們是怎么工作的。