一、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>
三、组件命名格式
组件的命名可以使用驼峰式命名法或短横线分隔命名法。在注册组件时,需要保持命名的一致性;
使用 驼峰标识符(组件名:MyComponet) <MyComponent></MyComponent>
使用 短横线分隔符(组件名:my-component)<my-component></my-component>