Vue 组件基础（五）

一、Vue 组件的基础概念

组件(Component)是Vue最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue的编译器为它添加特殊功能。每个组件负责一部分特定的任务，比如：显示一个按钮、一个表单或者一个复杂的页面布局。

Vue让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。

组件的作用

提高可维护性：将应用拆分成多个小的组件，使得每个组件的功能相对单一，易于理解和修改。当应用的某个部分出现问题时，可以快速定位到相应的组件进行修复。
可复用性：一旦创建了一个组件，可以在不同的地方重复使用，减少代码重复。例如，一个通用的输入框组件可以在多个页面中使用。
团队协作：不同的开发人员可以同时开发不同的组件，提高开发效率。

二、创建和注册组件

1、单文件组件（SFC）

单文件组件是 Vue 中推荐的组件编写方式，它将一个组件的模板、脚本和样式写在一个以 .vue 为后缀的文件中。

<template>
	<div>
		<el-button @click="count++">点我 {{count}}</el-button>
	</div>
</template>

<script setup>
	import {ref} from 'vue'
	const count=ref(100)
</script>

<style>
   .el-button{
	   background: bisque;
   }
</style>

2 、全局组件注册

使用 Vue.component() 方法进行全局注册

在main.js主入口文件中注册全局组件

一旦全局注册了组件，就可以在任何新创建的Vue实例/组件的模板中作为自定义元素使用。

注意: 全局注册应谨慎使用，因为这会污染Vue的全局作用域，可能导致命名冲突。通常建议只对基础结构或者第三方组件进行全局注册，而对于应用特有的组件，最好在局部注册。

3、局部组件注册

在使用 <script setup> 的单文件组件中，导入的组件可以直接在模板中使用，无需注册：

<template>
	<div>
		 <h1>这是子组件!</h1>
		 <MyComponentVue></MyComponentVue>
	</div>
</template>

<script setup>
	import MyComponentVue from './MyComponent.vue';
</script>

<style>
</style>