两周掌握Vue3(三):全局组件、局部组件、Props
文章目录
- 一、全局组件
- 1.创建全局组件
- 2.在main.js中注册全局组件
- 3.使用全局组件
- 二、局部组件
- 1.创建局部组件
- 2.在另一个组件中注册、使用局部组件
- 三、Props
- 1.定义一个子组件
- 2.定义一个父组件
- 3.效果
代码仓库:跳转
本博客对应分支:03
一、全局组件
Vue 3 中的全局组件是在应用程序中全局注册的组件,可以在任何地方使用,而不需要在每个组件中都单独注册。
1.创建全局组件
在components目录下创建全局组件MyGlobalComponent.vue:
<!-- components/MyGlobalComponent.vue -->
<template><div>This is my global component</div>
</template><script>
export default {name: 'MyGlobalComponent'
};
</script>
2.在main.js中注册全局组件
import { createApp } from 'vue';
import App from './App.vue';const app = createApp(App);// 注册全局组件
import MyGlobalComponent from './components/MyGlobalComponent.vue';
app.component('MyGlobalComponent', MyGlobalComponent);app.mount('#app');
3.使用全局组件
在App.vue中尝试使用我们定义和注册的全局组件:
<!-- App.vue -->
<template><div id="app"><!-- 使用全局组件 --><MyGlobalComponent ></MyGlobalComponent><HelloWorld /></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue';export default {name: 'App',components: {HelloWorld}
};
</script>
- 效果:

二、局部组件
在 Vue 3 中,局部组件是指在单个组件内部注册和使用的组件。这意味着局部组件只能在其父组件内部使用,而无法在其他组件中直接使用。要在 Vue 3 中创建一个局部组件,可以在父组件的 components 选项中注册它,然后在父组件的模板中使用它。
1.创建局部组件
在components目录下创建局部组件MyLocalComponent.vue:
<!-- components/MyLocalComponent.vue -->
<template><div><h2>这是局部组件</h2><p>我只能在父组件内部使用</p></div>
</template><script>
export default {name: 'MyLocalComponent'
};
</script>
2.在另一个组件中注册、使用局部组件
<!-- App.vue -->
<template><div id="app"><!-- 使用全局组件 --><MyGlobalComponent></MyGlobalComponent><!-- 使用局部组件 --><MyLocalComponent></MyLocalComponent><HelloWorld /></div>
</template><script>
// 引入并注册局部组件
import HelloWorld from './components/HelloWorld.vue';
import MyLocalComponent from './components/MyLocalComponent.vue';export default {name: 'App',components: {HelloWorld,MyLocalComponent}
};
</script>
- 效果:

三、Props
在 Vue 3 中,props 是用于从父组件向子组件传递数据的机制。通过 props,父组件可以向子组件传递数据,子组件可以接收并使用这些数据。
1.定义一个子组件
在components目录下创建一个子组件ChildComponent.vue:
我们定义了一个名为 message 的 prop,并使用了 props 的验证功能。我们指定了它的类型为 String,并且设置为必需的(required: true)。这意味着父组件在使用 ChildComponent 时必须传递一个名为 message 的字符串类型的数据。
<!-- ChildComponent.vue -->
<template><div><h2>子组件</h2><p>{{ message }}</p></div></template><script>export default {props: {message: {type: String,required: true}}};</script>
2.定义一个父组件
在components目录下创建一个子组件ParentComponent.vue:
在父组件中,我们使用了 v-bind 或者简写的 : 语法将 parentMessage 数据传递给了 ChildComponent 的 message prop。这样,parentMessage 的值就会被传递到 ChildComponent 中,并在子组件中使用。
<!-- ParentComponent.vue -->
<template><div><h1>父组件</h1><ChildComponent :message="parentMessage" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentMessage: '这是来自父组件的消息'};}
};
</script>
3.效果
为了便于在页面上展示,我们在App.vue中注册ParentComponent为局部组件:
<!-- App.vue -->
<template><div id="app"><!-- 使用全局组件 --><MyGlobalComponent></MyGlobalComponent><!-- 使用局部组件 --><MyLocalComponent></MyLocalComponent><HelloWorld /><ParentComponent></ParentComponent></div>
</template><script>
// 引入并注册局部组件
import HelloWorld from './components/HelloWorld.vue';
import MyLocalComponent from './components/MyLocalComponent.vue';
import ParentComponent from './components/ParentComponent.vue';export default {name: 'App',components: {HelloWorld,MyLocalComponent,ParentComponent}
};
</script>
- 效果:

相关文章:
两周掌握Vue3(三):全局组件、局部组件、Props
文章目录 一、全局组件1.创建全局组件2.在main.js中注册全局组件3.使用全局组件 二、局部组件1.创建局部组件2.在另一个组件中注册、使用局部组件 三、Props1.定义一个子组件2.定义一个父组件3.效果 代码仓库:跳转 本博客对应分支:03 一、全局组件 Vue…...
Web前端篇——element-plus组件设置全局中文
背景:在使用el-date-picker组件时,发现组件中的文字默认都是英文。 设置全局中文的方法如下:(本文只介绍CDN方式) <script src"//unpkg.com/element-plus/dist/locale/zh-cn"></script> <s…...
【iOS】数据存储方式总结(持久化)沙盒结构
在iOS开发中,我们经常性地需要存储一些状态和数据,比如用户对于App的相关设置、需要在本地缓存的数据等等,本篇文章将介绍六个主要的数据存储方式 iOS中数据存储方式(数据持久化) 根据要存储的数据大小、存储数据以及…...
硬盘重新分区怎么恢复分区之前的文件?
分区是常见的故障,通常由多种原因引起。一方面,硬盘老化或者受到损坏可能会导致分区表出现问题;另一方面,用户误操作,如格式化或分区不当,也可能导致分区丢失。针对此问题,解决方法包括使用专业…...
C++每日一练(15):简单幂计算
题目描述 输入两个数a和b,求a的b次方。 输入 输入两个整数a,b(1<a<10,1<b<15)。 输出 输出一个正整数,该值<1000000000000。 输入样例 3 3 输出样例 27 参考答案 #include<bits/stdc.h&…...
扫雷游戏【可展开一片,超详细,保姆级别,此一篇足够】
一、C语言代码实现的扫雷游戏的运行 C语言实现扫雷 二、扫雷游戏的分析与设计 1.扫雷游戏的界面设计 在玩家玩扫雷的时候,它会给你一个二维的棋盘(下面的讲解都以9x9规格为例子),然后点击你想排查的坐标,若不是雷的&…...
鸿蒙开发-DevEco Studio Profiler工具进行帧率分析
Frame Profiler概述 DevEco Studio内置Profiler分析调优工具,其中Frame分析调优功能,用于录制GPU数据信息,录制完成展开之后的子泳道对应录制过程中各个进程的帧数据,主要用于深度分析应用或服务卡顿丢帧的原因。此外,…...
Google推出Telecom Jetpack库,让Android通话应用创建更简单
Google推出Telecom Jetpack库,让Android通话应用创建更简单 Telecom Jetpack库的最新Alpha版本已经推出。该库提供了多个API,以简化Android开发者创建语音和/或视频通话应用程序的过程,支持常见功能,例如接听/拒绝、音频路由等等…...
倒计时1天|解锁「PolarDB开发者大会」正确打开方式
1月17日 9:30-16:30 北京嘉瑞文化中心 PolarDB开发者大会 明天就要和大家就见面啦~ 大会参会指南现已出炉 各位开发者们,请查收~ 👇👇👇 点击 大会主页 or 扫描上方二维码 一键抵达大会官网👇 查看…...
链表-两两交换链表中的节点
给定一个链表,两两交换其中相邻的节点,并返回交换后的链表。 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换。 // 递归版本 class Solution {public ListNode swapPairs(ListNode head) {// base case 退出提交if(head nu…...
vue下载文件流效果demo(整理)
在 Vue 项目中,你可以使用 FileSaver.js 库来方便地下载文件流。FileSaver.js 封装了不同浏览器的下载方式,使得下载文件更加简单和兼容。以下是一个完整的示例方法: 首先,安装 FileSaver.js 库: <template>&l…...
【从0上手cornerstone3D】如何渲染一个基础的Dicom文件(含演示)
一、Cornerstone3D 是什么? Cornerstone3D官网:https://www.cornerstonejs.org/ 在线查看显示效果(加载需时间,可先点击运行),欢迎fork 二、代码示例 了解了Cornerstone是什么,有什么作用后&…...
Unity3D PVP游戏位置同步算法优化详解
在Unity3D中,PVP(Player versus Player)游戏的位置同步是一项重要的技术,它决定了游戏中玩家之间的互动体验。本文将详细介绍Unity3D PVP游戏位置同步算法的优化方法,并给出相应的技术详解和代码实现。 对啦ÿ…...
【速成】蓝桥杯嵌入式省一教程
写在前面 蓝桥杯虽然是水赛,含金量不如其他老牌竞赛那么高,但对提高自身的能力还是有一定帮助的。无论你是想混个奖项加加综测分,还是想学学单片机、嵌入式的知识,蓝桥杯电子类的嵌入式竞赛都值得参加一次。当然蓝桥杯电子类竞赛…...
通过Lambda表达式获取字段列名,以及需要注意的地方
日常开发用MyBatis Plus的lambda表达式查询,不用手写column列名,不易出错且便于改动,如下: LambdaQueryWrapper<LanguageIntercept> lambdaQueryWrapper new LambdaQueryWrapper(); lambdaQueryWrapper.eq(LanguageInterc…...
消息队列的作用与使用场景?
一、消息队列的作用 队列的主要作用是消除高并发访问高峰,加快网站的响应速度。 在不使用消息队列的情况下,用户的请求数据直接写入数据库,在高并发的情况下,会对数据库造成巨大的压力,同时也使得系统响应延迟加剧。 …...
前端常见面试题之ajax、http
文章目录 一、手写ajax请求1. get2. post3. xhr.readyState4. xhr.status5. xhr.open 二、跨域三、cookie、localStorage和sessionStorage四、http1. http常见的状态码有哪些2. http常见的header有哪些3. 什么是RestfulAPI4. 描述一下http的缓存机制5. https 一、手写ajax请求 …...
林江院长:让斜视的孩子改“斜”归正,“正视”未来
读写时跳行、不敢和别人对视、拍照时不敢看镜头......这些不便是不少斜视患儿每天都在经历的日常。 斜视是目前儿童常见的眼科疾病之一,该眼病不仅给孩子的外在形象带来影响,更重要的是会影响双眼视功能及身心健康,其危害不容小觑。 7岁男孩晓…...
windows系统Mysql备份脚本
一.背景 用的windows server 2019服务器,mysql8.0.34,还是应该每天备份一下。以前做了很多次,主要是带了2个徒弟,还是要写出来。 二.备份脚本 chcp 936 set date_tmp%date:~0,10% set datetime%date_tmp:/%%time:~0,2%%time:~3,…...
localStorage、sessionStorage、vuex区别和使用感悟
一、介绍及区别 localStorage的生命周期是永久;不手动在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。 sessionStorage的生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭,那么所有通过sessionStorage存…...
.Net框架,除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求,由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面: 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限,形成层级清晰的管理网络…...
工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年,作为行业领先的3D工业相机及视觉系统供应商,累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成,通过稳定、易用、高回报的AI3D视觉系统,为汽车、新能源、金属制造等行…...
html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
Xen Server服务器释放磁盘空间
disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...
站群服务器的应用场景都有哪些?
站群服务器主要是为了多个网站的托管和管理所设计的,可以通过集中管理和高效资源的分配,来支持多个独立的网站同时运行,让每一个网站都可以分配到独立的IP地址,避免出现IP关联的风险,用户还可以通过控制面板进行管理功…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机,它可以执行Java字节码。Java虚拟机是Java平台的一部分,Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...
Unity中的transform.up
2025年6月8日,周日下午 在Unity中,transform.up是Transform组件的一个属性,表示游戏对象在世界空间中的“上”方向(Y轴正方向),且会随对象旋转动态变化。以下是关键点解析: 基本定义 transfor…...
绕过 Xcode?使用 Appuploader和主流工具实现 iOS 上架自动化
iOS 应用的发布流程一直是开发链路中最“苹果味”的环节:强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说,这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发(例如 Flutter、React Na…...
大模型——基于Docker+DeepSeek+Dify :搭建企业级本地私有化知识库超详细教程
基于Docker+DeepSeek+Dify :搭建企业级本地私有化知识库超详细教程 下载安装Docker Docker官网:https://www.docker.com/ 自定义Docker安装路径 Docker默认安装在C盘,大小大概2.9G,做这行最忌讳的就是安装软件全装C盘,所以我调整了下安装路径。 新建安装目录:E:\MyS…...
