解析 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 并且页面中不展示内容了
相关内容
热门资讯
走进小城看消费丨江西资溪：低碳...
夏日时节下午4点，江西省抚州市资溪县大觉山景区漂流终点依然热闹。来自南昌的游客余鑫漂流结束后没有...
【中原晨会0625】市场分析专...
来源：市场资讯 （来源：中原证券研究所） 本期重点研报目录 【中原策略】市场分析：电子半导体领涨 ...
南向资金连买4日！低费率+可月...
6月25日早盘，港股红利资产震荡整理。截至11时14分，港股红利低波ETF招商(520550)下跌0...
618成交破百万！紫荆花用一套...
一年一度的618年中大促，是消费市场的晴雨表，也是品牌间最激烈的角力场。当各大品牌在直播间里铆足了劲...
原创 黄...
2026年6月25日的国际金价已经从前期的5500美元高点跌到4200美元下方，累计跌幅超过22%，...
英伟达CEO：Vera Rub...
截至9:38，中证半导体材料设备主题指数（931743）涨2.36%创新高；权重股中，中微公司涨3....
再被催债16亿！“钢铁大王”戴...
澎湃新闻记者 贺梨萍 因“铁本事件”入狱五年的戴国芳重返钢铁行业，但他并没有完成从阶下囚再到“钢铁大...
周三原油价格下跌
随着美国和伊朗在和平谈判中取得进展，越来越多的油轮公开穿越霍尔木兹海峡，原油在战时的价格上涨已经蒸发...
这种蛋白是大脑衰老的开关
这种蛋白是大脑衰老的开关 清晨，假设一位五十岁左右的王女士发现自己常常把手机放在熟悉的抽屉里又找不到...
信通院牵头算力Token出海生...
盘面上，截至11：04，中证科创创业50指数（931643）涨1.68%，创历史新高；权重股中，芯原...
海外 774 亿营收背后：日本...
文 | 游戏价值论 6月23日，彭博社报道了腾讯正在围绕出售多家日本游戏工作室少数股权开展谈判，包...
餐饮“抢人”大战：把店开到公交...
作者 |餐饮老板内参 内参君 医院、公交站、演唱会…餐饮品牌，正在无孔不入 在北京儿童医院，肯德基...
快讯 | 外资扫货！陈翊庭：港...
港交所行政总裁陈翊庭在接受《中国证券报》专访时指出，国际资本对中国资产的看法已彻底扭转，布局中国市场...
2777.77元！A股“股王”...
25日早盘，昨天创下历史新高的A股“股王”联讯仪器，今天上午继续走强，盘中股价再度刷新历史新高。 截...
原创 今...
欧洲自己的媒体直接下结论，欧盟衰退躲不掉，内部分裂拦不住，现在就连欧洲顶尖工业巨头，都偷偷在用中国的...
黄仁勋股东大会放言：本轮AI基...
在当地时间6月24日的英伟达（NVDA.O）2026年度股东大会上，股东批准了该公司全部10名董事会...
国际油价大跌
新华社消息， 纽约原油期货主力合约价格24日盘中跌破每桶70美元，为伊朗战事爆发以来首次。 市场分析...
马云带队插秧，什么信号？
一场别开生面的“务农”，让外界看到了一个不一样的阿里巴巴。 近日，阿里巴巴合伙人、高德董事长刘振飞在...
全球最大产能，最高丰度达99....
本文转自【科技日报】； 6月23日，高丰度硼-10同位素技术暨产业化成果发布会在山东省东营市举办，全...
黄金大跳水！金饰克价年内暴跌近...
25日，现货黄金盘中震荡，截至发稿，报3985.070美元/盎司，跌0.17%。 当地时间24日，...