Vue前端开发，组件及组件的使用

什么是组件

组件(Component)是Vue中最强大的功能之一，每个Vue 文件就是一个个独立的组件，组件也可以被其他组件调用，形成嵌套关系，大部分的应用都是由各类不同功能的小组件进行构建，形成一个功能强大的大组件树系统，如下图所示。

可以说组件是应用开发的核心，是系统构建的基础，其重要性不言而喻，每个组件是功能可复用的独立的封装代码，它可以像使用普通标签一样，直接在模板中使用，从而进一步扩展了HTML 标签，它有下列二种定义方式。

单文件组件

单文件组件简称为(SFC)，它是指在使用脚手架构建项目时，自动生成的一个扩展名为.vue的单独文件，而在这个文件中，就是一个定义好的Vue 组件，如代码所示。

<template><div>{{ tip }}</div>
</template>
<script>
export default {name:"Base",data() {return {tip: "今天的天气非常不错！"}}
}
</script>

JavaScript 对象

除使用脚手架创建项目时，自动定义 Vue 组件之外，还可以在js文件中定义一个包含 Vue 特定选项的JavaScript 对象，这也是定义了一个Vue 组件，如下代码所示。

export default {data() {return {tip: "今天的天气非常不错！"}},template: `<div>{{ tip }}</div>`
}

在上述js文件的代码中，定义的组件默认是使用export default方法导出自己，模板是一个内联的JavaScript字符串变量，Vue 在执行时会自动编译它，成为组件的模板部分。

组件使用

一个组件在使用之前，必须先进行注册，只有完成注册了，Vue 才能在渲染时找到对应的功能模块，因此，组件的注册是组件使用的前提，注册的方式分为两种，一种是全局注册，另一种是局部注册，注册成功后，组件就可以像普通标签一样使用了。
全局注册

全局注册组件的方式非常简单，只需要调用Vue 应用实例中的component() 方法，就可以注册一个在当前Vue应用实例中都可以使用的全局组件，具体实现步骤如下：

1. 先定义一个名称为Global.vue，用于全局注册的组件，代码如下。

<template><div>{{ tip }}</div>
</template>
<script>
export default {name: "Global",data() {return {tip: "这是一个全局组件！"}}
}
</script>

在main.js文件中，调用component() 方法将定义的组件注册为全局组件，代码如下

import { createApp } from 'vue'
import App from './App.vue'
import Global from './components/ch6/Global'
let app = createApp(App);
app.component("Global",Global);
app.mount('#app')

在任意一个组件，如App.vue 中，直接调用注册成功的全局组件，代码如下

<template><global />
</template>
<script>
export default {name: "App"
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;color: #2c3e50;
}
</style>

需要说明的是：在第2个步骤中，调用Vue 应用实例化对象的component()方法时，需传入两个参数，第一个是指这个全局组件的名称，第二个是指这个全局组件所对应的目标组件，通常是已定义完成的组件。

此外，component() 方法可以采用链式方式编写，注册多个全局组件，格式如下所示。

app.component("GlobalA", GlobalA).component("GlobalB", GlobalB).component("GlobalC", GlobalC)

最后，各个被注册的全局组件之间也可以相互调用，因此，上述代码中的三个被注册的全局组件内部是可以相互访问的。
局部注册

全局组件虽然注册简单，使用方便，但在实际项目中存在以下几点不足：

1)全局组件一旦注册完成，即使不使用，打包发布时，并不会自动移除，而是依然在打包生成的js文件中，不利于打包文件体积的优化。

2)注册成功的的全局组件，在大型项目的使用过程中，依赖关系并不是很明确，如果同时注册多个全局组件，使用时，不易定位某个组件，不利于后期项目的维护和优化。

针对上述问题，可以通过局部注册组件来解决，相比于全局注册的组件，局部组件必须在父组件中显式声明，组件间的依赖关系更加清晰，对打包文件的优化更加友好，注册方式也更加简单，只需要以下两个步骤。

1. 先定义一个名称为Local.vue，用于局部注册的组件，代码如下。

<template><div>{{ tip }}</div>
</template>
<script>
export default {name: "Local",data() {return {tip: "这是一个局部组件！"}}
}
</script>

2. 在任意一个组件，如App.vue 中，导入新建的组件，并使用 components 选项，声明导入的组件，完成局部组件注册的功能，代码如下。

<template><local/>
</template>
<script>
import Local from './components/ch6/Local.vue';
export default {name: "App",components: {Local}
};
</script>
<style>
//省略样式代码
</style>

需要说明的是：在components配置属性中，key名就是组件名，可以使用简写方式，也可以将对应的value值列出，因此下列代码是等价的。

components: {Local}

等价于：

components: {Local:Local}

此外，局部注册的组件只能在注册的父组件中使用，并不能运用到它的子组件或后代组件，即局部组件只对显式的注册有效，而对后代组件无效。

组件命名格式

在注册组件时，有下列二种命名格式，一种是短横线分隔(kebab-case)，另外一种是首字母大写(PascalCase)，接下面分别进行介绍。

短横线分隔

使用短横线分隔定义的组件，在引用该组件时，也必须使用短横线分隔，例如：使用短横线分隔定义了一个组件，格式如下。

app.component('custom-component-name', {/* ... */
})

引用这个自定义组件时的书写格式必须是 。

首字母大写

使用首字母大写定义的组件，在引用该组件时，两种命名格式都可以使用，例如：使用首字母大写定义了一个组件，格式如下。

app.component('CustomComponentName', {/* ... */
})

如果需要引用这个组件时，既可以写成 格式，也可以写成 格式。

需要说明的是：官方提倡使用首字母大写格式，因为它是一个合法的 JavaScript 标识符，可以很容易地导入和注册到组件中，同时，开发工具也提供了很好的自动补全功能。

此外，首字母大写的格式在模板中会更加明显地表明这是一个 Vue 组件，而不是原生 HTML 元素，可以更容易地将系统自带的 Vue 组件和自定义元素区分开。