組件的基本使用

注冊組件

注冊組件就是利用Vue.component()方法，先傳入一個自定義組件的名字，然后傳入這個組件的配置。

 Vue.component('mycomponent',{  template: `<div>這是一個自定義組件</div>`,  data () {   return {    message: 'hello world'   }  } })

如上方式，就已經創建了一個自定義組件，然后就可以在Vue實例掛在的DOM元素中使用它。

 <div id="app">  <mycomponent></mycomponent>  <my-component></my-component></div><script> var app = new Vue({  el: '#app',  data: {  },  components: {   'my-component': {    template: `<div>這是一個局部的自定義組件，只能在當前Vue實例中使用</div>`,   }  } })</script>

直接使用Vue.component()創建的組件，所有的Vue實例都可以使用。還可以在某個Vue實例中注冊只有自己能使用的組件。

var app = new Vue({  el: '#app',  data: {  },  components: {   'my-component': {    template: `<div>這是一個局部的自定義組件，只能在當前Vue實例中使用</div>`,   }  } })

模板的要求

注意：組件的模板只能有一個根元素。下面的情況是不允許的。

template: `<div>這是一個局部的自定義組件，只能在當前Vue實例中使用</div>      <button>hello</button>`,

組件中的data必須是函數

可以看出，注冊組件時傳入的配置和創建Vue實例差不多，但也有不同，其中一個就是data屬性必須是一個函數。
這是因為如果像Vue實例那樣，傳入一個對象，由于JS中對象類型的變量實際上保存的是對象的引用，所以當存在多個這樣的組件時，會共享數據，導致一個組件中數據的改變會引起其他組件數據的改變。

而使用一個返回對象的函數，每次使用組件都會創建一個新的對象，這樣就不會出現共享數據的問題來了。

關于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>