组件的定义及复用性，局部组件和全局组件 · 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> ~~~