註冊元件

註冊元件就是利用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中物件型別的變數實際上儲存的是物件的引用，所以當存在多個這樣的元件時，會共享資料，導致一個元件中資料的改變會引起其他元件資料的改變。而使用一個返回物件的函式，每次使用元件都會建立一個新的物件，這樣就不會出現共享資料的問題來了。