vue3 好用的命名空间组件

 命名空间组件

可以使用带点的组件标记，例如 <Foo.Bar> 来引用嵌套在对象属性中的组件。这在需要从单个文件中导入多个组件的时候非常有用：

Components/index.ts 用于导出组件

import Foo from './Foo.vue';
import Bar from './Bar.vue';

export { Foo, Bar };

index.vue 基于命名空间使用组件

 

方式一：

<script setup lang='ts'>
import * as Form from "../Components";
</script>

<template>
  <Form.Foo />
  <Form.Bar />
</template>

 

方式二：

<script setup lang='ts'>
import {HelloWorld as ddd, ComOne} from "../Components";
</script>

<template>
      <ddd />
    <ComOne />
</template>