[TOC] #### 1. 什么是組件 --- 組件是可復用的 Vue 實例,通過自定義元素實現組件 組件名定義規(guī)范: html 不區(qū)分大小寫,統(tǒng)一使用小寫,多個單詞使用短橫線隔開(art-list) #### 2. 組件的使用 --- 第一步: 創(chuàng)建組件構造器對象 ```javascript const notice = Vue.extend({ template: ` <div> <p>國慶放假通知</p> <div>國慶節(jié)假期為10.1~10.7,共七天</div> </div> `, }); ``` 第二步: 注冊組件(全局組件、局部組件) 全局組件: 可在任意 vue 實例中使用 ``` Vue.component("notice", notice); ```  局部組件: 哪個 vue 實例中注冊才能在哪個 vue 示例中使用  #### 3. 全局組件注冊語法糖 --- [https://cn.vuejs.org/v2/api/#Vue-component](https://cn.vuejs.org/v2/api/#Vue-component) 全局組件注冊語法糖寫法: 將 Vue.extend() 的參數作為 Vue.component() 的第二個參數直接傳入  #### 4. 組件模板抽離 --- script 標簽寫法 ```html <script type="text/x-template" id="notice"> <div>who im i</div> </script> ```  template 標簽寫法 ```html <template id="notice"> <div>how are you</div> </template> ```  #### 5. 為什么組件的 data 必須是一個函數(經典問題) --- 先拋出答案: **為了實現組件不管被復用多少次,組件中的 data 數據都是互相隔離的,互不影響** 組件是不能訪問 vue 實例中的數據的,組件是一個單獨功能模塊的封裝,組件有屬于自己的 html 模板,也有屬于自己的數據 data, 只是這個 data 屬性必須是一個函數,而且這個函數返回一個對象,對象內部保存著數據 組件是可復用的 vue 實例,一個組件被創(chuàng)建好之后,就可能被用在各個地方,而組件不管被復用了多少次,組件的中的 data 數據應該是相互隔離的,互不影響的。 先來看下以下代碼   多次復用組件想實現數據共享可以這樣寫: **return 一個對象變量,因為變量存儲的是內存地址** 