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

Vue3之组件

news 2026/3/27 2:28:23

何为组件

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

[特殊字符] 怕你停电的姐姐：UPS 还分 “直流” 和 “交流”？ 今天一篇给你盘个透！

哈喽&#xff0c;我的老铁们&#xff01;我是你们那个 “怕你停电” 的姐姐&#xff0c;也是专门卖 UPS 电源的姐姐&#xff01;平时总有朋友问我&#xff1a;“姐姐&#xff0c;我看 UPS 有好多种&#xff0c;什么直流交流的&#xff0c;到底有啥区别&#xff1f;我该咋选&…...

编程新知 2026/3/27 1:44:29

MAC动态库加载路径优化：从@rpath到install_name_tool实战解析

1. 动态库加载路径问题的本质 当你第一次在Mac上遇到"Library not loaded"错误时&#xff0c;那种感觉就像在陌生城市迷了路。我清楚地记得自己早期开发时&#xff0c;控制台突然抛出红色错误信息的场景&#xff1a; dyld: Library not loaded: libAwesome.dylibRefe…...

编程新知 2026/3/27 0:19:27

Sourcetrail实战：如何利用可视化分析加速大型C++项目代码理解

1. 为什么大型C项目需要可视化分析工具 接手一个百万行级别的C项目是什么体验&#xff1f;我第一次接触MariaDB源码时&#xff0c;面对层层嵌套的类继承、错综复杂的函数调用链&#xff0c;光是理清handler类的派生关系就花了整整两天。这种经历让我深刻意识到&#xff1a;传统…...

编程新知 2026/3/26 23:39:05

N诺机试题

2.整除&#xff08;末尾无空格用printf“ ”&#xff09;#include<stdio.h>int main(){int count0;for(int i100;i<1000;i){if(i%50&&i%60){printf("%d",i);count;if(count%100) printf("\n");else printf(" "); }}return 0;…...

编程新知 2026/3/26 22:38:21

基于单周期控制的交错并联无桥Boost PFC变换器：宽电压范围与高效率转换技术实现高效电源管理

基于单周期控制的两相交错并联无桥Boost型 PFC 变换器 采用两路 Boost PFC 交错并联实现的&#xff0c;每一路的控制方式和结构都是相同的&#xff0c;由此推出控制方法相同&#xff0c;都为单周期控制&#xff0c;所以只分析一路的结果就可以类比 1、输入电压&#xff1a;150V…...

编程新知 2026/3/26 22:14:15

Python开发环境搭建新选择：Miniconda-Python3.11镜像体验

Python开发环境搭建新选择&#xff1a;Miniconda-Python3.11镜像体验 1. 为什么选择Miniconda-Python3.11镜像 Python作为当今最流行的编程语言之一&#xff0c;其版本管理和环境隔离一直是开发者面临的挑战。传统的Python安装方式往往会导致&#xff1a; 系统Python版本与项…...

编程新知 2026/3/26 20:19:43

轴承‘健康度’预测新思路：用LSTM处理振动信号，我对比了PyTorch和TensorFlow 2.x的实现差异

轴承健康预测实战&#xff1a;PyTorch与TensorFlow 2.x的LSTM实现深度对比 在工业设备维护领域&#xff0c;轴承作为旋转机械的核心部件&#xff0c;其健康状态直接影响整机运行安全。传统基于阈值的报警方式往往滞后于实际故障发生&#xff0c;而采用LSTM&#xff08;长短期记…...

编程新知 2026/3/26 19:35:25

基于dify智能客服工作流的多智能体架构实战：高并发场景下的设计与优化

背景痛点&#xff1a;当智能客服遭遇流量洪峰 最近在负责一个电商大促期间的智能客服系统保障&#xff0c;真切体会到了传统单体智能体架构的“力不从心”。我们的客服机器人基于一个大语言模型构建&#xff0c;平时QPS在50左右时&#xff0c;响应时间&#xff08;RT&#xff0…...

编程新知 2026/3/26 19:35:25

macOS Sequoia 15.7.5 (24G624) 正式版 ISO、IPSW、PKG 下载

macOS Sequoia 15.7.5 (24G624) 正式版 ISO、IPSW、PKG 下载 iPhone 镜像、Safari 浏览器重大更新和 Apple Intelligence 等众多全新功能令 Mac 使用体验再升级 请访问原文链接&#xff1a;https://sysin.org/blog/macOS-Sequoia/ 查看最新版。原创作品&#xff0c;转载请保留…...

编程新知 2026/3/26 18:56:40

WPS宏工具实战：5分钟搞定批量图片尺寸调整（JSA/VBA双版本代码）

WPS宏工具实战&#xff1a;5分钟搞定批量图片尺寸调整&#xff08;JSA/VBA双版本代码&#xff09; 在文档处理中&#xff0c;批量调整图片尺寸是个高频需求。想象一下&#xff0c;你手头有份50页的产品手册&#xff0c;每页都嵌入了不同尺寸的图片&#xff0c;而客户要求所有图…...

编程新知 2026/3/26 17:01:19