当前位置：首页 > news >正文

Vue3之组件

news 2025/9/15 15:14:14

何为组件

组件化的概念已经提出了很多年了，但是何为组件呢？组件有啥优势？本文将会做出解答，首先我们需要弄清楚何为组件。在VUE的官网中的解释是：
组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。
我觉得这个解释很官方，不好理解，我的理解是：组件其实就是完成一个功能的每一个模块的封装，比如我们要完成一个购物APP，我们设计完APP的架构后需要把各个部分组件化，比如登录模块、直播模块、支付模块、购物车模块、商详模块…等等，这些每一个模块就可以称为是一个组件，他们是独立于APP的，每个模块都可以单独进行自己的开发，不会影响到其他模块，但是模块之间可以进行通信，共同完成一个功能。这样的好处就是APP可裁剪，假如我们现在要开发一个新的购物VIP APP专门给特定人群使用，我们不需要再重新开发，只复用我们开发过的这些模块，就可以快速搭建一个新的APP了。

VUE3中也提供了组件的实现，如下图所示(图片来自VUE官网)：
在这里插入图片描述我们可以将一个页面拆成多个模块，每个模块就可以称为一个组件,这些组件具有复用性，在其他页面也可能会使用到，所以将其抽成一个组件，当我们在其他地方需要使用相似的UI展示效果时，可以重用这些组件，快速搭建新的界面。

示例解析

在VUE中可以使用components来声明一个组件，声明的组件分为两种，一种是全局组件，一种是局部组件。我们可以简单实现两个组件，一个是计数器，名为counter，点击计数器的值可进行加一操作，一个是div组件，名为hello- world,显示“hello world”。下面我们分别看下如何定义全局组件和局部组件，以及他们的区别。

全局组件

全局组件：优点：只要定义了，处处可以使用。
。缺点：性能不高

注意：全局组件的名称建议使用小写字母单词，中间使用“-”分隔

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/vue@next"></script><title>组件</title>
</head>
<body><div id="root"></div>
</body><script>const app = Vue.createApp({template:`<div><counter /></div><div><hello-world /></div>`});//定义全局组件app.component('hello-world',{template:`<div>hello world</div>`});app.component('counter',{data() {return {count:1}},template:'<div @click="count+=1">{{count}}</div>'});const vm = app.mount('#root');
</script>
</html>

如上面的代码所示，定义全局组件的时候可以使用app.component{组件名，{组件实现}}的方式,定义完后就可以像使用div标签那样使用组件了。

局部组件

局部组件：定义了局部组件后，需要注册之后才能使用，优点是性能比较高，缺点是使用起来比较麻烦

注：定义局部组件的时候会声明一个局部变量，这个变量的名字建议使用大写字母开头，驼峰命名，局部组件使用时需要做一个组件名字和组件间的映射

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/vue@next"></script><title>组件</title>
</head>
<body><div id="root"></div>
</body><script>// //局部组件const Counter = {data(){return {count:1}},template:`<div @click="count += 1">{{count}}</div>`};const HelloWorld = {//定义局部组件时首字母大写，使用驼峰命名template:`<div>hello world</div>`};const app = Vue.createApp({components:{'counter':Counter,'hello-world':HelloWorld}, //定义局部组件必须使用这个template:`<div><counter /></div><div><hello-world /></div>`});const vm = app.mount('#root');
</script>
</html>

如上面代码所示：定义局部组件的时候，使用的方式是：const XxxYy = {组件实现};，使用的时候先注册，做一个组件和名字的映射，然后再使用就行了，使用和全局组件相同：

 components:{'counter':Counter,'hello-world':HelloWorld}, //定义局部组件必须使用这个

运行截图：

总结

本文主要介绍了组件的概念和VUE3中定义和使用组件的方法。看完本文，读者应该能了解到全局组件和局部组件的定义和使用方法以及他们之间的区别。组件具有复用性，全局组件只要定义了，处处都可以使用，而且使用很简单，但是性能不高；局部组件定义后需要注册餐能使用，而且使用起来相对麻烦，但是性能比较高。

Vue3之组件

何为组件

示例解析

全局组件

局部组件

总结

相关文章：

Vue3之组件

【网络】套接字 -- UDP

Lambda原理及应用

运动耳机推荐、最值得入手的运动耳机清单共享

c盘爆满--如何清理电脑C盘

Nginx配置web服务器及部署反向代理

mvvm和mvc

JavaScript while 循环

CMU15-445 Project.0总结

计算机网络题库---错题本

【react】react创建项目与引入AntD组件库：

hook与mixin

【C语言】自定义类型

没有上司的舞会（C++，树形DP）

【java基础】static和final关键字的作用及其用法详解

#集成学习#：bagging、boosting、stacking和blending

NCRE计算机等级考试Python真题（一）

C#协变逆变

算法设计与分析期末考试复习（四）

qsort函数排序数据 and 模拟实现qosrt函数（详解）

内存分配函数malloc kmalloc vmalloc

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

算法：模拟

Python Ovito统计金刚石结构数量

招商蛇口 | 执笔CID，启幕低密生活新境

C#学习第29天：表达式树（Expression Trees）

免费数学几何作图web平台

NPOI操作EXCEL文件 ——CAD C# 二次开发

云原生周刊：k0s 成为 CNCF 沙箱项目

消防一体化安全管控平台：构建消防“一张图”和APP统一管理