組件的定義及復用性，局部組件和全局組件 · vue筆記

[TOC] >[success] # 組件的定義及復用性，局部組件和全局組件 ![](https://img.kancloud.cn/59/f9/59f9c7516cbd2ed27137b3341b05c800_1406x544.png) 上圖，**左面** 是 **頁面** 的 **整體結構** ，我們可以把它 **拆分成 3 個部分** ，**頭部** 、 **左側部分** 、 **右側部分** ，每個部分可以**再進行拆分** , 這樣我們就會發現一個頁面可以進行 **層層拆分** ，拆成一個像 **右側** 一樣的 **樹狀結構** ，這就是 **拆分組件的思維** 。 >[success] ## 組件復用性 **組件具備共用性（復用性），每個組件的數據是獨享的，而不會跟其他組件共享** ， **組件在頁面多次引用，它們的數據不會共享，每個組件都是獨立的** >[success] ## 全局組件 **全局組件名稱** ：建議用小寫橫線連接（例如：counter-parent）我們可以看到下面的代碼中， **counter-parent組件** 與 **counter 組件** 是兄弟級組件，那為什么在 **counter-parent組件** 中又可以引用 **counter 組件** 呢，這是因為用 **app.component 方法定義的組件都會成為全局組件** ，在哪里都可以使用。 **缺點** ： **如果定義了組件但是頁面中未引用該組件的標簽元素，這個組件會占用這個app實例化對象的存儲空間，一直掛載在這個app實例化對象上** ，所以說它對性能是有一定的損耗的，你不用它，它也在。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>組件的定義及復用性，局部組件和全局組件</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 父組件 const app = Vue.createApp({ template: ` <div> <counter-parent /> <counter /> <counter /> <counter /> </div>` }) // 定義全局組件 app.component('counter-parent', { template: `<counter />` }) // 定義全局組件 app.component('counter', { data(){ return { count: 1 } }, template: `<div @click="count += 1">{{count}}</div>` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 局部組件 **局部組件名稱** ：建議用 **大駝峰命名（例如：Name）** **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>組件的定義及復用性，局部組件和全局組件</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 1. 創建局部組件(局部組件建議首字母大寫) const Counter = { data(){ return { count: 1 } }, template: `<div @click="count += 1">{{count}}</div>` } // 父組件 const app = Vue.createApp({ components: { // 2. 引入局部組件 // Counter: Counter // 組件名：組件值 // 簡寫： Counter }, template: ` <div> <counter /> </div>` }) const vm = app.mount('#root') </script> </html> ~~~