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

Vue3之组件

news 2026/2/9 11:50:59

何为组件

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

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

编程新知 2026/2/5 1:30:05

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2026/1/31 6:09:22

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2026/2/5 12:11:18

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/11/17 21:48:26

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2026/2/6 15:01:23

人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

编程新知 2026/2/9 10:58:49

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2026/1/28 11:47:09

苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...

编程新知 2025/12/22 12:09:15

认识CMake并使用CMake构建自己的第一个项目

1.CMake的作用和优势 跨平台支持&#xff1a;CMake支持多种操作系统和编译器&#xff0c;使用同一份构建配置可以在不同的环境中使用 简化配置&#xff1a;通过CMakeLists.txt文件&#xff0c;用户可以定义项目结构、依赖项、编译选项等&#xff0c;无需手动编写复杂的构建脚本…...

编程新知 2026/2/7 19:54:51

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画！！！

目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...

编程新知 2026/2/4 3:31:19