Vue 组件基础（五）

一、Vue 组件的基础概念

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

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

组件的作用 

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

二、创建和注册组件 

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>

三、组件命名格式

组件的命名可以使用驼峰式命名法或短横线分隔命名法。在注册组件时，需要保持命名的一致性;

1. 使用 驼峰标识符（组件名：MyComponet）     <MyComponent></MyComponent>

2. 使用 短横线分隔符（组件名：my-component）<my-component></my-component>