vue3-命名空间组件使用

官方文档位置：

 特点：

• 可以一次import多个组件
• 组件之间关系更明确，例如官方举例的两个组件form-input和form-label，很清楚的知道用于表单
• 需要是vue3项目，script需要是setup格式

 使用：

1.创建文件夹包裹相应组件和一个用于引入导出的js文件

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>