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