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

Vue3之组件

news 2025/10/31 4:58:34

何为组件

组件化的概念已经提出了很多年了，但是何为组件呢？组件有啥优势？本文将会做出解答，首先我们需要弄清楚何为组件。在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之组件

何为组件 组件化的概念已经提出了很多年了&#xff0c;但是何为组件呢&#xff1f;组件有啥优势&#xff1f;本文将会做出解答&#xff0c;首先我们需要弄清楚何为组件。在VUE的官网中的解释是&#xff1a; 组件允许我们将 UI 划分为独立的、可重用的部分&#xff0c;并且可以对…...

编程日记 2023/2/27 2:54:10

【网络】套接字 -- UDP

&#x1f941;作者&#xff1a; 华丞臧. &#x1f4d5;​​​​专栏&#xff1a;【网络】 各位读者老爷如果觉得博主写的不错&#xff0c;请诸位多多支持(点赞收藏关注)。如果有错误的地方&#xff0c;欢迎在评论区指出。 推荐一款刷题网站 &#x1f449; LeetCode刷题网站 文章…...

编程日记 2023/2/27 2:51:49

Lambda原理及应用

Lambda原理及应用 Lambda介绍 Lambda 是 JDK8 以后版本推出的一个新特性&#xff0c;也是一个重要的版本更新&#xff0c;利用 Lambda 可以简化内部类&#xff0c;可以更方便的进行集合的运算&#xff0c;让你的代码看起来更加简洁,也能提升代码的运行效率。 Lambda语法 非…...

编程日记 2023/2/27 2:50:42

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

现在市面上各式各样的运动蓝牙耳机着实让人挑花了眼,怎样才能从纷繁复杂的市场中挑选出专业性、安全性、舒适性等各个方面都做地可圈可点的运动蓝牙耳机可真不是一件易事啊&#xff0c;甚至连不少老朋友都会踩坑&#xff0c;为了能让大家挑到真正的运动蓝牙耳机&#xff0c;为此…...

编程日记 2023/2/27 2:49:31

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

问题 c盘饱满很多天了&#xff0c;今天终于忍无可忍&#xff0c;开始展开对c盘的处理 c盘的基本处理有两步&#xff0c; 第一步&#xff0c;电脑系统清理 1,c盘右键属性&#xff0c;有个磁盘清理&#xff0c;好像是系统更新的一些缓存资源&#xff0c;可以直接清理 当然这只…...

编程日记 2023/2/27 2:48:22

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

Nginx配置web服务器及部署反向代理配置web服务器location语法部署反向代理代理转发配置web服务器 项目部署到linux上的静态文件代理给Nginx处理。当访问服务器IP时&#xff0c;可以自动返回静态文件主页。 主配置文件中server块对应的次配置include /etc/nginx/conf.d/*.conf…...

编程日记 2023/2/27 2:47:14

mvvm和mvc

mvvm是model-view-viewmodel的缩写&#xff0c;前端开发的架构模式 m&#xff1a; model&#xff1a;模型&#xff0c;指的是数据和交互业务逻辑 v&#xff1a; view&#xff1a;视图&#xff0c;用户看到的ui界面 vm&#xff1a; viewmodel&#xff1a;视图模型&#xff0…...

编程日记 2023/2/27 2:46:05

JavaScript while 循环

JavaScript while 循环的目的是为了反复执行语句或代码块。只要指定条件为 true&#xff0c;循环就可以一直执行代码块。while 循环while 循环会在指定条件为真时循环执行代码块。语法while (条件){需要执行的代码 }实例本例中的循环将继续运行&#xff0c;只要变量 i 小于 5&a…...

编程日记 2023/2/27 2:44:54

CMU15-445 Project.0总结

在线测试 本地测试 Project #0 - C Primer 以下是Project #0的网址&#xff0c;2022FALL的Project #0本质上是实现一棵字典树&#xff0c;关于字典树的相关内容可以参考C实现字典树。 在本题中&#xff0c;为了存储对应着字符串的任意类型值&#xff0c;题目设计了一个Tri…...

编程日记 2023/2/27 2:43:43

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

&#xff08;一&#xff09;老生常谈 第一章&#xff1a; 1.什么是计算机网络&#xff1f;其主要功能是什么&#xff1f; 解答&#xff1a; 利用通信设备和线路&#xff0c;将分布在地理位置不同的、功能独立的多个计算机系统连接起来&#xff0c;以功能完善的网络软件实现网…...

编程日记 2023/2/27 2:42:18

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

文章目录一、初始化项目&#xff1a;【1】创建项目【2】暴露项目配置文件【3】安装依赖【4】配置less二、快捷键&#xff1a;【1】rcctab三、安装AntD组件库&#xff1a;【1】安装【2】index.js【3】问题&#xff1a;【4】效果&#xff1a;一、初始化项目&#xff1a; 【1】创…...

编程日记 2023/2/27 2:41:03

hook与mixin

看完vue3就开始看vue3的源码&#xff0c;表示很懵~ 刚把rollup打包搞完&#xff0c;这不响应式就接着来了&#xff01;&#xff0c;还是写篇直接使用vue3的博客清清脑吧&#xff01; 什么是hook、mixin&#xff1f; mixin: Vue2中多个组件内存在重复JS业务逻辑&#xff0c;使…...

编程日记 2023/2/27 2:39:41

【C语言】自定义类型

一、什么是自定义类型C语言提供了丰富的内置类型&#xff0c;常见的有int, char, float, double, 以及各种指针。除此之外&#xff0c;我们还能自己创建一些类型&#xff0c;这些类型称为自定义类型&#xff0c;如数组&#xff0c;结构体&#xff0c;枚举类型和联合体类型。二、…...

编程日记 2023/2/27 2:38:30

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

题目描述 某大学有 nnn 个职员&#xff0c;编号为 1…n1\ldots n1…n。 他们之间有从属关系&#xff0c;也就是说他们的关系就像一棵以校长为根的树&#xff0c;父结点就是子结点的直接上司。 现在有个周年庆宴会&#xff0c;宴会每邀请来一个职员都会增加一定的快乐指数 ri…...

编程日记 2023/2/27 2:37:18

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

文章目录static关键字静态字段静态方法静态代码块静态内部类final关键字final字段final方法final类static关键字 这个关键字表示静态的&#xff0c;用于不同地方意思不一样 静态字段 如果我们将其作用到字段上&#xff0c;那么该字段为类所拥有&#xff0c;我们使用new关键字…...

编程日记 2023/2/27 2:36:04

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

集成学习是一种机器学习方法&#xff0c;旨在提高单个模型的性能和鲁棒性。它基于这样一个假设&#xff1a;通过结合多个模型的预测结果&#xff0c;可以获得更好的预测性能&#xff0c;因为每个模型都可能从数据中提取不同的信息&#xff0c;因此他们的错误也可能是不同的&…...

编程日记 2023/2/27 2:33:35

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

第一套试题1、关于数据的存储结构&#xff0c;以下选项描述正确的是A.数据所占的存储空间量B.数据在计算机中的顺序存储方式C.数据的逻辑结构在计算机中的表示D.存储在外存中的数据正确答案&#xff1a; C2、关于线性链表的描述&#xff0c;以下选项中正确的是A.存储空间不一定…...

编程日记 2023/2/27 2:32:23

C#协变逆变

文章目录协变协变接口的实现逆变里氏替换原则协变 协变概念令人费解&#xff0c;多半是取名或者翻译的锅&#xff0c;其实是很容易理解的。 比如大街上有一只狗&#xff0c;我说大家快看&#xff0c;这有一只动物&#xff01;这个非常自然&#xff0c;虽然动物并不严格等于狗…...

编程日记 2023/2/27 2:31:05

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

贪心算法&#xff08;Greedy Algorithm&#xff09; 找零钱问题 假设有4种硬币&#xff0c;面值分别为&#xff1a;二角五分、一角、五分和一分&#xff0c;现在要找给顾客六角三分钱&#xff0c;如何找使得给出的硬币个数最少&#xff1f; 首先选出1个面值不超过六角三分的最…...

编程日记 2023/2/27 2:29:52

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

前言&#xff1a;内容包括使用库函数qsort排序任意类型的数据&#xff0c;模拟实现qsort函数&#xff08;冒泡排序的逻辑&#xff09; 我们先了解qsort函数的语法&#xff1a;qsort函数默认按照升序排序数据 void qsort (void* base, size_t num, size_t size,int (*compar)(…...

编程日记 2023/2/27 2:28:41

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/8/24 3:48:04

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

编程新知 2025/10/30 21:00:07

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/10/21 19:54:04

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2025/10/29 22:27:28

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2025/10/29 0:30:24

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

编程新知 2025/9/1 19:01:24

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...

编程新知 2025/10/1 12:53:26

6️⃣Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙

Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙 一、前言：离区块链还有多远？ 区块链听起来可能遥不可及，似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上，构建一个区块链的核心并不复杂，尤其当你已经掌握了一门系统编程语言，比如 Go。 要真正理解区…...

编程新知 2025/10/12 1:37:40

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...

编程新知 2025/10/14 22:57:53