html多个页面复用一个组件,组件的定义及复用性，局部组件和全局组件

[TOC]

>[success] # 组件的定义及复用性，局部组件和全局组件


上图，**左面** 是 **页面** 的 **整体结构** ，我们可以把它 **拆分成 3 个部分** ，**头部** 、 **左侧部分** 、 **右侧部分** ，每个部分可以**再进行拆分** , 这样我们就会发现一个页面可以进行 **层层拆分** ，拆成一个像 **右侧** 一样的 **树状结构** ，这就是 **拆分组件的思维** 。

>[success] ## 组件复用性

**组件具备共用性(复用性)，每个组件的数据是独享的，而不会跟其他组件共享** ， **组件在页面多次引用 ，它们的数据不会共享，每个组件都是独立的**

>[success] ## 全局组件

**全局组件名称** ：建议用小写横线连接(例如：counter-parent)

我们可以看到下面的代码中， **counter-parent组件** 与 **counter 组件** 是兄弟级组件，那为什么在 **counter-parent组件** 中又可以引用 **counter 组件** 呢， 这是因为用 **app.component 方法定义的组件都会成为全局组件** ，在哪里都可以使用。

**缺点** ： **如果定义了组件但是页面中未引用该组件的标签元素，这个组件会占用这个app实例化对象的存储空间，一直挂载在这个app实例化对象上** ，所以说它对性能是有一定的损耗的，你不用它，它也在。

**index.html**

~~~

组件的定义及复用性，局部组件和全局组件

// 父组件

const app = Vue.createApp({

template: `

})

// 定义全局组件

app.component('counter-parent', {

template: ``

})

// 定义全局组件

app.component('counter', {

data(){

return {

count: 1

}

},

template: `

{{count}}

`

})

const vm = app.mount('#root')

~~~

>[success] ## 局部组件

**局部组件名称** ：建议用 **大驼峰命名(例如：Name)**

**index.html**

~~~

组件的定义及复用性，局部组件和全局组件

// 1. 创建局部组件(局部组件建议首字母大写)

const Counter = {

data(){

return {

count: 1

}

},

template: `

{{count}}

`

}

// 父组件

const app = Vue.createApp({

components: { // 2. 引入局部组件

// Counter: Counter // 组件名：组件值

// 简写：

Counter

},

template: `

})

const vm = app.mount('#root')

~~~