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

两周掌握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.效果 代码仓库&#xff1a;跳转 本博客对应分支&#xff1a;03 一、全局组件 Vue…...

Web前端篇——element-plus组件设置全局中文

背景&#xff1a;在使用el-date-picker组件时&#xff0c;发现组件中的文字默认都是英文。 设置全局中文的方法如下&#xff1a;&#xff08;本文只介绍CDN方式&#xff09; <script src"//unpkg.com/element-plus/dist/locale/zh-cn"></script> <s…...

【iOS】数据存储方式总结(持久化)沙盒结构

在iOS开发中&#xff0c;我们经常性地需要存储一些状态和数据&#xff0c;比如用户对于App的相关设置、需要在本地缓存的数据等等&#xff0c;本篇文章将介绍六个主要的数据存储方式 iOS中数据存储方式&#xff08;数据持久化&#xff09; 根据要存储的数据大小、存储数据以及…...

硬盘重新分区怎么恢复分区之前的文件?

分区是常见的故障&#xff0c;通常由多种原因引起。一方面&#xff0c;硬盘老化或者受到损坏可能会导致分区表出现问题&#xff1b;另一方面&#xff0c;用户误操作&#xff0c;如格式化或分区不当&#xff0c;也可能导致分区丢失。针对此问题&#xff0c;解决方法包括使用专业…...

C++每日一练(15):简单幂计算

题目描述 输入两个数a和b&#xff0c;求a的b次方。 输入 输入两个整数a&#xff0c;b&#xff08;1<a<10&#xff0c;1<b<15&#xff09;。 输出 输出一个正整数&#xff0c;该值<1000000000000。 输入样例 3 3 输出样例 27 参考答案 #include<bits/stdc.h&…...

扫雷游戏【可展开一片,超详细,保姆级别,此一篇足够】

一、C语言代码实现的扫雷游戏的运行 C语言实现扫雷 二、扫雷游戏的分析与设计 1.扫雷游戏的界面设计 在玩家玩扫雷的时候&#xff0c;它会给你一个二维的棋盘&#xff08;下面的讲解都以9x9规格为例子&#xff09;&#xff0c;然后点击你想排查的坐标&#xff0c;若不是雷的&…...

鸿蒙开发-DevEco Studio Profiler工具进行帧率分析

Frame Profiler概述 DevEco Studio内置Profiler分析调优工具&#xff0c;其中Frame分析调优功能&#xff0c;用于录制GPU数据信息&#xff0c;录制完成展开之后的子泳道对应录制过程中各个进程的帧数据&#xff0c;主要用于深度分析应用或服务卡顿丢帧的原因。此外&#xff0c…...

Google推出Telecom Jetpack库,让Android通话应用创建更简单

Google推出Telecom Jetpack库&#xff0c;让Android通话应用创建更简单 Telecom Jetpack库的最新Alpha版本已经推出。该库提供了多个API&#xff0c;以简化Android开发者创建语音和/或视频通话应用程序的过程&#xff0c;支持常见功能&#xff0c;例如接听/拒绝、音频路由等等…...

倒计时1天|解锁「PolarDB开发者大会」正确打开方式

1月17日 9:30-16:30 北京嘉瑞文化中心 PolarDB开发者大会 明天就要和大家就见面啦&#xff5e; 大会参会指南现已出炉 各位开发者们&#xff0c;请查收~ &#x1f447;&#x1f447;&#x1f447; 点击 大会主页 or 扫描上方二维码 一键抵达大会官网&#x1f447; 查看…...

链表-两两交换链表中的节点

给定一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后的链表。 你不能只是单纯的改变节点内部的值&#xff0c;而是需要实际的进行节点交换。 // 递归版本 class Solution {public ListNode swapPairs(ListNode head) {// base case 退出提交if(head nu…...

vue下载文件流效果demo(整理)

在 Vue 项目中&#xff0c;你可以使用 FileSaver.js 库来方便地下载文件流。FileSaver.js 封装了不同浏览器的下载方式&#xff0c;使得下载文件更加简单和兼容。以下是一个完整的示例方法&#xff1a; 首先&#xff0c;安装 FileSaver.js 库&#xff1a; <template>&l…...

【从0上手cornerstone3D】如何渲染一个基础的Dicom文件(含演示)

一、Cornerstone3D 是什么&#xff1f; Cornerstone3D官网&#xff1a;https://www.cornerstonejs.org/ 在线查看显示效果&#xff08;加载需时间&#xff0c;可先点击运行&#xff09;&#xff0c;欢迎fork 二、代码示例 了解了Cornerstone是什么&#xff0c;有什么作用后&…...

Unity3D PVP游戏位置同步算法优化详解

在Unity3D中&#xff0c;PVP&#xff08;Player versus Player&#xff09;游戏的位置同步是一项重要的技术&#xff0c;它决定了游戏中玩家之间的互动体验。本文将详细介绍Unity3D PVP游戏位置同步算法的优化方法&#xff0c;并给出相应的技术详解和代码实现。 对啦&#xff…...

【速成】蓝桥杯嵌入式省一教程

写在前面 蓝桥杯虽然是水赛&#xff0c;含金量不如其他老牌竞赛那么高&#xff0c;但对提高自身的能力还是有一定帮助的。无论你是想混个奖项加加综测分&#xff0c;还是想学学单片机、嵌入式的知识&#xff0c;蓝桥杯电子类的嵌入式竞赛都值得参加一次。当然蓝桥杯电子类竞赛…...

通过Lambda表达式获取字段列名,以及需要注意的地方

日常开发用MyBatis Plus的lambda表达式查询&#xff0c;不用手写column列名&#xff0c;不易出错且便于改动&#xff0c;如下&#xff1a; LambdaQueryWrapper<LanguageIntercept> lambdaQueryWrapper new LambdaQueryWrapper(); lambdaQueryWrapper.eq(LanguageInterc…...

消息队列的作用与使用场景?

一、消息队列的作用 队列的主要作用是消除高并发访问高峰&#xff0c;加快网站的响应速度。 在不使用消息队列的情况下&#xff0c;用户的请求数据直接写入数据库&#xff0c;在高并发的情况下&#xff0c;会对数据库造成巨大的压力&#xff0c;同时也使得系统响应延迟加剧。 …...

前端常见面试题之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请求 …...

林江院长:让斜视的孩子改“斜”归正,“正视”未来

读写时跳行、不敢和别人对视、拍照时不敢看镜头......这些不便是不少斜视患儿每天都在经历的日常。 斜视是目前儿童常见的眼科疾病之一&#xff0c;该眼病不仅给孩子的外在形象带来影响&#xff0c;更重要的是会影响双眼视功能及身心健康&#xff0c;其危害不容小觑。 7岁男孩晓…...

windows系统Mysql备份脚本

一.背景 用的windows server 2019服务器&#xff0c;mysql8.0.34&#xff0c;还是应该每天备份一下。以前做了很多次&#xff0c;主要是带了2个徒弟&#xff0c;还是要写出来。 二.备份脚本 chcp 936 set date_tmp%date:~0,10% set datetime%date_tmp:/%%time:~0,2%%time:~3,…...

localStorage、sessionStorage、vuex区别和使用感悟

一、介绍及区别 localStorage的生命周期是永久&#xff1b;不手动在浏览器提供的UI上清除localStorage信息&#xff0c;否则这些信息将永远存在。 sessionStorage的生命周期为当前窗口或标签页&#xff0c;一旦窗口或标签页被永久关闭&#xff0c;那么所有通过sessionStorage存…...

UABEA深度指南:Unity AssetBundle资源提取与序列化层逆向分析

1. 为什么Unity开发者总在“找资源”上浪费半天——UABEA不是万能钥匙&#xff0c;但它是你最该先摸清的那把 Unity项目交付后&#xff0c;美术资源、音频片段、UI图集、甚至脚本逻辑&#xff0c;常常被打包进AssetBundle&#xff08;.unity3d&#xff09;、Resources文件夹或更…...

聚合芘环石墨炔:机器学习模拟揭示新型二维碳负极材料的储锂潜力

1. 项目概述&#xff1a;从石墨烯到PolyPyGY&#xff0c;二维碳负极材料的进阶之路在锂离子电池这个已经相当成熟的领域里&#xff0c;负极材料的创新一直是推动能量密度和功率密度突破的关键。从早期的石墨&#xff0c;到后来的硅基材料&#xff0c;再到如今备受瞩目的二维材料…...

射电天文数据处理:致密源扣除与系统误差量化实战指南

1. 项目概述&#xff1a;从宇宙网节点探测说起在射电天文学领域&#xff0c;我们常常扮演宇宙的“收音机”调谐师&#xff0c;试图从充满噪声的宇宙背景中&#xff0c;分离出那些微弱却至关重要的天体物理信号。最近&#xff0c;一项关于宇宙网节点射电辐射的研究&#xff0c;再…...

高能物理数据分析实战:从W玻色子截面测量到机器学习应用

1. 项目概述&#xff1a;从海量对撞数据到物理发现如果你对宇宙的构成充满好奇&#xff0c;想知道我们是如何发现希格斯玻色子&#xff0c;或者顶夸克的质量是如何被精确测量的&#xff0c;那么高能物理数据分析就是你正在寻找的钥匙。这听起来可能离日常生活很远&#xff0c;但…...

非交换多项式优化:利用稀疏性破解大规模矩阵优化难题

1. 非交换多项式优化&#xff1a;从理论到计算的深度解析在优化理论的世界里&#xff0c;我们习惯了处理那些“听话”的变量——实数、向量&#xff0c;它们满足交换律&#xff0c;x*y总是等于y*x。然而&#xff0c;当我们踏入量子力学、鲁棒控制或高级矩阵分析等领域时&#x…...

别再手动写日报了!Claude项目中枢搭建全教程(含API对接、敏感信息脱敏、审计留痕三重安全机制)

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Claude项目中枢的定位与核心价值 Claude项目中枢是整个AI协作体系的调度核心与语义枢纽&#xff0c;它不直接执行模型推理&#xff0c;而是承担上下文治理、权限编排、多模态协议适配与可信链路审计等关键职能…...

鸿蒙electron跨端框架PC片段匣实战:给常用代码片段一个能搜索、复制和整理的桌面仓

前言 欢迎加入鸿蒙PC开发者社区&#xff0c;共同打造开发者工具生态&#xff1a;鸿蒙PC开发者社区 &#xff1a;https://harmonypc.csdn.net/ 项目开源地址&#xff1a;https://AtomGit.com/lqjmac/ele-pianduanxia 片段匣这一篇&#xff0c;我更想按一次真实改项目的节奏来…...

LLM可观测性实战:生产环境AI应用的监控体系建设

为什么LLM应用的监控与传统软件完全不同 传统软件监控关注的核心指标很清晰&#xff1a;响应时间、错误率、吞吐量、CPU/内存使用率。这些指标背后的系统行为是确定性的——同样的输入&#xff0c;永远产生同样的输出。LLM应用打破了这个假设。面对同样的用户输入&#xff1a;-…...

OmenSuperHub:惠普OMEN游戏本终极性能控制软件完全指南

OmenSuperHub&#xff1a;惠普OMEN游戏本终极性能控制软件完全指南 【免费下载链接】OmenSuperHub 使用 WMI BIOS控制性能和风扇速度&#xff0c;自动解除DB功耗限制。 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub 想要彻底掌控你的惠普OMEN游戏本性能吗…...

大白话拆解AI黑话!从LLM到Agent,一篇扫盲无压力

前言&#xff1a;别再被AI名词劝退了 有没有一种感觉&#xff1a;现在刷技术文章、看AI项目、聊行业趋势&#xff0c;满屏都是 LLM、Token、上下文、RAG、Agent、幻觉…… 每个词都似懂非懂&#xff0c;搜完解释看完就忘&#xff0c;想用的时候依旧一头雾水。 其实所有AI名词&a…...