官方文档位置:
![](https://i-blog.csdnimg.cn/blog_migrate/9fd65667e0cf881fdc5aa483be86339a.png)
特点:
- 可以一次import多个组件
- 组件之间关系更明确,例如官方举例的两个组件form-input和form-label,很清楚的知道用于表单
- 需要是vue3项目,script需要是setup格式
使用:
1.创建文件夹包裹相应组件和一个用于引入导出的js文件
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/88f9b325ac566b9441c86eae85049886.png)
2.在js文件中进行引入和导出
//index.js
//布局头部组件
import header from './header.vue'
//布局主题组件
import body from './body.vue'
//布局底部组件
import footer from './footer.vue'
export {
header,
body,
footer
}
3.项目中使用命名空间组件
<template>
<div>
<Layout.Header></Layout.Header>
<Layout.Header name="命名空间组件"></Layout.Header>
</div>
</template>
<script setup>
import * as Layout from './components/layout'
</script>
<style scoped lang="scss">
</style>