解析 Vue3 语法糖中的 “ 命名空间组件“ 到底是什么东西
创始人
2025-05-31 17:23:24
0次
解析 " 命名空间组件" 到底是什么东西
- 前言
- 一、命名空间组件是什么？
- 二、分析理解
- 1.从单个文件中导入多个组件 -- 分别引入
- 2.从单个文件中导入多个组件 -- 使用命名空间的方式引入
- 总结
前言
在使用 Vue3 的过程当中, 在学习语法糖的时候,发现了 命名空间组件这个名词,在此之前并未了解过,来浅浅的研究一下 ~
一、命名空间组件是什么？
以下介绍来自官方文档
二、分析理解
1.从单个文件中导入多个组件 – 分别引入
首先创建三个组件 : componentA , componentb , componentC
创建一个 child.js 引入这三个组件并抛出
// child.js// 引入组件
import ComponentA from './componentA.vue'
import ComponentB from './ComponentB.vue'
import ComponentC from './ComponentC.vue'
// 抛出组件
export {ComponentA,ComponentB,ComponentC
}
在父组件中引入 child.js ,并使用 child.js 中的三个组件
我是父组件！
// father.vue
这时候页面中的效果如下
2.从单个文件中导入多个组件 – 使用命名空间的方式引入
代码如下（示例）：
我是父组件！
此处的效果是一样的 ~ ! !
总结
使用 命名空间组件 的引入组件的方式方便之处就是如果需要引入一个文件中的多个组件,就不用一个一个引入了,可以 import * as Xxx from 'xxx' 将整个文件引入
antdesign 中已经有这样的用法了,组件之间的关系更加明确,有一个相同父级
label
前提
使用命名空间组件是有前提的 ! : 必须是 Vue3 中 setup 语法糖 的格式才可以使用,直接在 Vue3 中使用是不生效的 (有看到文章中说必须是 Vue3+ ts ,我在 Vue3 setup script 语法糖中不使用 ts 的情况下试了试,是可以的)
不使用 Vue3 语法糖的方式,会有 warn 并且页面中不展示内容了
相关内容
热门资讯
王凤英入职小鹏3年终获股权，此...
5月7日消息，小鹏汽车披露的监管及年报信息显示，公司总裁王凤英已正式进入股东名册，入职小鹏3年后股权...
五块钱红酒卖断货，便宜红酒为何...
最近一段时间，中国的酒类消费市场可以说是显得格外奇怪，一方面，各种高端酒特别是白酒的消费量出现了明显...
财联社C50风向指数调查：4月...
财联社5月8日讯（记者 夏淑媛）新一期财联社“C50风向指数”结果显示，市场机构对4月新增人民币贷款...
央视硬刚国际足联拒掏20亿，背...
作者| 史大郎&猫哥 来源| 是史大郎&大猫财经Pro 央视这次太刚了，离世界杯开幕还有1个月，死活...
新CEO上任直接放大招！Air...
快科技5月8日消息，苹果即将上任的CEO John Ternus对未来一系列新产品充满信心，称这些设...
“特朗普拟邀英伟达、波音等CE...
据路透社当地时间5月7日报道，特朗普政府正邀请英伟达、苹果、埃克森美孚、波音等大公司首席执行官，于下...
世界杯，还能看到直播吗？
2026年美加墨世界杯距离开幕，仅剩一个多月时间。多方信息显示，中央广播电视总台（以下简称“央视”）...
机构警告AI芯片热潮风险，超威...
5月7日，据央视财经，隔夜超威半导体公司(AMD)股价飙升近19%，带动AI芯片热潮持续升温。AMD...
银行员工转走储户1800万最新...
银行员工转走储户1800万最新进展：2名储户已收到银行全部款项
原创 中...
1994年，安徽省的经济格局曾发生过一次戏剧性的转折。在那一年，一座名为安庆的城市，其国内生产总值（...
昆都仑区：政策“蓄力”消费焕新
“一台5000多元的空调，叠加‘国补’和商场的以旧换新活动，能优惠1000元左右，旧机还能免费上门拆...
乐悦置业竞得佛山顺德乐从镇一商...
观点网讯：5月6日，佛山市顺德区乐从镇一商业地块成功出让，由广东省乐悦置业有限公司竞得，乐从南区·邻...
原创 亦...
《爱情没有神话》这部剧，一开始的命运颇为多舛，经历了几次撤档的波折后，终于在观众面前亮相，但其首播的...
美联储34年最大分歧叠加油价飙...
美联储按预期维持利率不变，但内部出现34年来最严重分歧，叠加布油创2022年6月以来新高，美债遭抛售...
支付宝消费券回收后，资金是否支...
摘要： 支付宝消费券回收变现后，资金能否直接转入信用卡？本文解答到账方式的相关规则，帮助用户了解资金...
中医介绍5个化痰穴位！收藏这篇...
很多人忽略了“痰”的危害，觉得咳几下就没事，殊不知，肺里的痰长期堆积，只会一步步加重身体负担。 中医...
黄金平台“杰我睿”涉嫌经济犯罪...
红星资本局5月7日消息，深圳水贝知名金店“杰我睿”兑付困难事件有了新进展。日前，深圳市公安局罗湖分局...
多地出台购房新政促楼市升温 记...
今年的“五一”假期，伴随着多个城市楼市新政密集落地，在叠加市场信心持续修复的作用下，房地产市场热度持...
谁是五一“吸金王”？这5座城市...
来源：市场资讯 （来源：21城市观） 哪座城市成为“五一”假期的大赢家？ 图源：摄图网 作者｜赵晓...
“低招低裁”格局稳固劳动力市场...
智通财经APP获悉，美国上周初请失业金人数在经历前一周回落至近几十年来最低水平后出现小幅反弹，表明尽...