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