Vue3父组件向子组件传值之ArticleItem组件的封装与使用

news2024/11/16 1:40:38

组件概念

官方文档:组件基础

本节核心内容:组件的封装与传值

组件允许我们将 UI 划分为独立的、可重用的部分,并且可以对每个部分进行单独的思考。在实际应用中,组件常常被组织成层层嵌套的树状结构:

这和我们嵌套 HTML 元素的方式类似,Vue 实现了自己的组件模型,使我们可以在每个组件内封装自定义内容与逻辑。

定义一个全局组件ArticleItem

全局组件我们说了,统一放在src/components目录中,这里边的组件我们全部作为全局组件注册使用。

1、新建一个ArticleItem.vue的文件,首先我们将Layout.vue组件中,重复出现的文章列表的区块代码全部拿到这个组件中。

2、通过局部组件引入的方式使用组件。

3、注册全局组件,做到一次注册全局使用,无需再次引入组件。

在src/base.js中引入如下代码,这就是全局注册组件的方式。

参考:官方文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/452589.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

易点易动固定资产管理平台如何帮助高校精准管理海量固定资产

高校拥有大量的固定资产,如教室、实验室、办公设备、体育设备等,这些资产数量庞大,分布广泛,管理难度大。传统的管理方式效率低下,难以实现精准和动态管理。易点易动固定资产管理平台利用现代信息技术,为高校提供一套智能化的资产管理解决方案,实现固定资产全流程的精准管理。 …

马云上三路和下三路

马云的上三路、下三路,马云最牛搭档总结 马云刚最牛搭档:蔡崇信,关明生 《关乎天下》是关明生写的一本书 趣讲大白话:没有方法走不远 【趣讲信息科技143期】 **************************** 马云上三路:使命&#xff0c…

为什么要选择付费SSL证书?免费和付费SSL证书的区别是什么?

近几年,由于互联网的发展与新冠疫情的影响,线上教育、线上办公、线上学习等逐渐融入我们的生活。但与此同时,信息数据泄露等网络安全问题也日益突出,为了保护企业与用户的隐私信息,越来越多的公司选择安装SSL证书来保护…

渲染02-内置Uniform

参考: CesiumJS 源码杂谈 - 从光到 Uniform 渲染02-内置Uniform 1 Unifrom 的接口 路径: pacaages/engin/Source/Renderer/AutomaticUniforms.js AutomaticUniforms 实际上是 Cesium 暴露给着色使用的接口集合。 AutomaticUniforms┖ AutomaticUniform(czm_projection/czm…

【Maven】Maven的打包方式和执行jar

Maven的打包方式和执行jar 1. Jar1.1 Pom.xml1.2 Run1.3 自动执行方法 2. Assembl1y2.1 Pom.xml2.2 Run2.3 要执行的方法 3. Awakening 1. Jar 1.1 Pom.xml <plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-co…

2024年浙大MBA提面申请细则及条件详解

中文MBA项目申请 浙江大学MBA招生分提前批和常规批两类。其中&#xff0c;提前批是针对工作年限较长、管理经验较丰富的考生&#xff0c;需要在正式报名参加MBA全国联考前向浙江大学MBA教育中心提出申请并在通过审核后参加相应的面试&#xff08;具体申请和面试安排请登录浙江…

【英语】100个句子记完5500个考研单词

文章目录 Sentence 01Sentence 02Sentence 03Sentence 04Sentence 05Sentence 06Sentence 07Sentence 08Sentence 09Sentence 10Sentence 11Sentence 12Sentence 13Sentence 14Sentence 15Sentence 16Sentence 17Sentence 18Sentence 19Sentence 20Sentence 21Sentence 22Sente…

力扣sql中等篇练习(十一)

力扣sql中等篇练习(十一) 1 好友申请|| :谁有最多的好友 1.1 题目内容 1.1.1 基本题目信息 1.1.2 示例输入输出 1.2 示例sql语句 # 出现数字次数越多,就代表它的好友越多 # 对两列数据合并时 不取出合并数据,采用UNION ALL SELECT t1.id,count(*) num FROM (SELECT request…

低功耗设计方法学——篇Ⅰ

引言 低功耗设计关乎ASIC芯片的性能稳定。对ASIC 特别是一些Soc芯片的设计有着重要的影响&#xff0c;随着集成规模的大幅度增加&#xff0c;芯片自身的功耗问题暴露也越来越明显。低功耗设计的需求和必要性也越来越值得关注。本文就《Low Power Methodology Manual For Syste…

【开发日志】2023.04 ZENO----Composite----CompNormalMap

NormalMap-Online (cpetry.github.io)https://cpetry.github.io/NormalMap-Online/ CompNormalMap 将灰度图像转换为法线贴图 将灰度图像转换为法线贴图是一种常见的技术&#xff0c;用于在实时图形渲染中增加表面细节。下面是一个简单的方法来将灰度图像转换为法线贴图&…

文件 与 IO操作

前言 本篇介绍文件的基本操作&#xff0c;认识文本文件与二进制文件的区别&#xff0c;什么是绝对路径与相对路径&#xff0c;java标志库中又是如何进行文件操作的&#xff1b;认识流对象进行简单的文件读取操作&#xff1b;如有错误&#xff0c;请在评论区指正&#xff0c;让…

全网最详细,Pytest自动化测试框架关联/参数化实战,及拿即用...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 Pytest自动化测试框…

从C出发 27 --- 深入理解指针与地址

指针是什么? 指针是变量&#xff0c;这种变量有一点特殊&#xff0c;它特殊在保存的值是内存地址&#xff0c;并且我们还可以通过指针所保存的内存地址来直接访问相应内存中的数据。 每一种指针类型的变量只保存对应类型变量的地址 比如这个类型的指针变量&#xff0c;只保…

计及源荷不确定性的综合能源生产单元运行调度与容量配置随机优化模型(matlab代码)

目录 1 主要内容 1.1 风光场景聚类 1.2 主模型程序结果 1.3 随机模型和确定性模型对比 1.4 有无储气对比 1.5 煤价灵敏性分析 1.6 甲烷价格灵敏性分析 2 部分程序 3 程序链接 1 主要内容 本程序复现《计及源荷不确定性的综合能源生产单元运行调度与容量配置两阶段随机…

Cloud Kernel SIG月度动态:发布 Anolis 8.8 镜像、kABI 社区共建流程

Cloud Kernel SIG&#xff08;Special Interest Group&#xff09;&#xff1a;支撑龙蜥内核版本的研发、发布和服务&#xff0c;提供生产可用的高性价比内核产品。 01 SIG 整体进展 Anolis 8.8 镜像发布&#xff0c;默认搭载 ANCK 5.10-013 版本。 Anolis 23 滚动内核更新至…

4月更新!EasyOps®全平台27项新功能一口气来袭~

又到了每月产品盘点时刻&#xff0c;27大新功能上线和升级优化&#xff0c;设计Hyperlnsight超融合持续观测平台、DevOps持续交付平台、AutoOps自动化运维平台、ITSM服务平台、公共服务&#xff0c;在不断的技术创新过程中&#xff0c;进一步加速IT运维效率升级。 下面和小编一…

Vue监视数据的学习笔记

Vue监测数据变化的更新 <div id"monitor"><h2>人员列表</h2><button click"updateMei">更新马冬梅信息</button><ul><li v-for"(p,index) of persons" :key"index">{{p.name}}--{{p.age}}…

Python数据结构-----递归实现快速排序

目录 前言&#xff1a; 快速排序 1.概念 2.示例 Python代码实现 递归实现快速排序 前言&#xff1a; 今天我们就来一起学习快速排序的思想方法&#xff0c;然后通过Python语言来实现快速排序的功能&#xff0c;下面我们就开始今天的学习吧&#xff01; 快速排序 1.概念 快…

银行数字化转型导师坚鹏:金融科技在银行数字化转型中的创新案例

金融科技在银行数字化转型中的创新与应用案例&#xff08;偏重对公业务&#xff09; 课程背景&#xff1a; 数字化背景下&#xff0c;很多银行存在以下问题&#xff1a; 不清楚5G如何赋能银行数字化转型&#xff1f; 不清楚最新金融科技创新与应用案例&#xff1f; 不了…

【部署YUM仓库】

目录 一、YUM概述1.1、YUM&#xff08; Yellow dog Upadater Modified) 二、准备安装源2.1、YUM软件仓库类型2.2、RPM软件包的来源2.3、第三方yum源的网址查看:2.4、构建CentOS 7 软件仓库2.4.1、配置yum源仓库时要先挂载2.4.2、配置yum源仓库2.4.3、配置完后更新缓存 2.5、ftp…