解析 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 中已经有这样的用法了,组件之间的关系更加明确,有一个相同父级

前提
使用命名空间组件是有前提的 ! : 必须是 Vue3 中 setup 语法糖 的格式才可以使用,直接在 Vue3 中使用是不生效的 (有看到文章中说必须是 Vue3+ ts ,我在 Vue3 setup script 语法糖中不使用 ts 的情况下试了试,是可以的)
不使用 Vue3 语法糖的方式,会有 warn 并且页面中不展示内容了
在这里插入图片描述

在这里插入图片描述

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：关于安卓颜色选择器的使用（一）

下一篇：kali内置超好用的代理工具proxychains

热门资讯

2025年广东省乡村旅游消费趋... 2024年，广东省乡村旅游接待游客5.1亿人次，占全省总旅游接待人次的58.6%；乡村旅游收入达37...

高晓峰:趋势线守卫战告捷黄金... 来源：市场资讯 7月22日，国际黄金本周初受美元走软及贸易局势影响强势走高。美国通胀数据低于预期，黄...

原创美... 在我们的日常生活中，电力早已融入了方方面面。我们习惯了出门时确保手机电量充足，家里需要WiFi的连接...

复牌“摘帽”！基金公司第一时间... 【导读】复牌当天再遭基金公司“补刀”，招商基金下调诺泰生物估值中国基金报记者若晖因涉及财务造假...

24年老将、前公募总经理“奔私... 【导读】携手老同事创业，原公募总经理宋小龙备案上海理泉私募基金中国基金报记者吴君又见公募基金总...

科创板开市6周年：已拥有589... 7月22日，科创板迎来开市6周年。这个中国资本市场最年轻的板块已经拥有589家上市公司、超7万亿元总...

马斯克正式进军餐饮业特斯拉超...

港股IPO递表第211期：智能...

科创板六周年！上市公司“掌门人... 【导读】 2025年7月22日，中国资本市场这片热土上，一块名为“科创板”的“试验田”已悄然耕耘六载...

聚焦"稳"... 北京2025年7月22日-- 当前，中国经济正经历深刻转型升级，企业面临市场波动、竞争加剧等多重挑战...

华泰柏瑞港股通时代机遇混合A：... AI基金华泰柏瑞港股通时代机遇混合A（011355）披露2025年二季报，第二季度基金利润292.6...

致179人遇难！韩国12·29... 据韩国《韩民族日报》7月21日报道，韩国国土交通部下属的“航空铁路事故调查委员会”7月19日就去年1...

卧龙电驱：7月21日融券卖出6... 证券之星消息，7月21日，卧龙电驱（600580）融资买入4.49亿元，融资偿还5.59亿元，融资净...

破解堵点卡点，做强国内大循环国务院常务会议7月16日召开，研究做强国内大循环重点政策举措落实工作，并作出一系列针对性部署。会议指...

改革赋能硬科技上市深圳打造独... 新质驱动·未来领航2025中国（深圳）独角兽企业大会重磅活动之独角兽企业上市并购交流会 7月18日...

基金二季报重仓股盘点：“宁王”... 随着基金二季报基本披露完毕，基金二季度的整体重仓情况也浮出水面。数据显示，今年第二季度，公募基金前...

天气炎热，国产冰淇淋加速“清凉... 炎炎夏日，是冰淇淋企业的生产旺季。作为消暑解热的重要食品，我国企业生产的冰淇淋等冷饮产品也正在加速走...

原创第... 7月21日晚间，第一创业（002797.SZ）发布公告，吴礼顺因工作调动原因辞去公司董事长、董事、战...

中证A50ETF指数基金：7月... 证券之星消息，7月21日，中证A50ETF指数基金（560350）融资买入66.31万元，融资偿还4...

公募十大重仓股出炉小米和新易... 证券时报记者安仲文随着公募基金二季报披露完毕，公募基金前十大重仓股最新名单出炉。根据天相数据口...