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

Vue3之组件

news 2026/2/7 16:35:51

何为组件

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

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

编程新知 2026/2/1 11:44:45

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

编程新知 2026/2/4 3:14:18

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2026/2/2 21:52:33

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2026/1/24 20:17:55

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/11/9 19:17:07

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/10/30 4:58:11

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2026/2/5 4:34:41

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2026/2/6 13:42:22

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

编程新知 2025/6/11 3:05:02

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05