vue3 命名空间组件

在 vue3 中，我们可以使用点语法来使用挂载在一个对象上的组件。

// components/Form/index.js
import Form from './Form.vue'
import Input from './Input.vue'
import Label from './Label.vue'
// 把Input、Label组件挂载到 Form 组件上
Form.Input = Input
Form.Label = Label
export default Form

// 使用：
<script setup lang="ts">
import Form from './components/Form'
</script>
<template>
  <Form>
    <Form.Label />
    <Form.Input />
  </Form>
</template>

命名空间组件在另外一种场景中的使用，从单个文件中导入多个组件时：

// FormComponents/index.js
import Input from './Input.vue'
import Label from './Label.vue'
export default {
    Input,
    Label,
}

// 使用
<script setup>
import * as Form from './FormComponents'
</script>
<template>
  <Form.Input>
    <Form.Label>label</Form.Label>
  </Form.Input>
</template>