#### 1.Vue組件的data必須是一個函數 --- [參考官網文檔](https://cn.vuejs.org/v2/guide/components.html#data-%E5%BF%85%E9%A1%BB%E6%98%AF%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0) 一個組件的 data 選項必須是一個函數，因此每個實例可以維護一份被返回對象的獨立的拷貝 ```html <div id="app"> <my-button></my-button> </div> <script> Vue.component('my-button', { template: '<button @click="count++">{{ msg }} {{ count }}</button>' ,data: function () { return { count: 0, msg: '點我啊' } } }) let vm = new Vue({ el: '#app' ,data: { msg: 'liang' } }) </script> ```  #### 2. 每個組件必須只有一個根元素 ---- [參考官方文檔](https://cn.vuejs.org/v2/guide/components.html#%E5%8D%95%E4%B8%AA%E6%A0%B9%E5%85%83%E7%B4%A0) **錯誤示例**  **正確示例** ```html <div id="app"> <my-button></my-button> </div> <script> Vue.component('my-button', { template: ` <ul> <li>1</li> <li>2</li> </ul> ` }) let vm = new Vue({ el: '#app' ,data: { msg: 'liang' } }) </script> ``` #### 3. 注冊局部組件 --- **components 屬性** + my-span 組件名 + mySpan 組件模板存放變量 ```html <div id="app"> <my-span></my-span> </div> <script> var mySpan = { template: '<p>12345</p>' ,data: function(){ return { } } } let vm = new Vue({ el: '#app' ,data: { msg: 'liang' } ,components: { 'my-span': mySpan } }) </script> ```