vue 单个文件中的多个组件

Question

在 vue 文档中，我在“脚本设置”指南中看到“命名空间组件”，它写道：

您可以使用带点的组件标签（如 <Foo.Bar>）来引用嵌套在对象属性下的组件。当您从单个文件导入多个组件时，这非常有用：

<script setup>
import * as Form from './form-components'
</script>

<template>
  <Form.Input>
    <Form.Label>label</Form.Label>
  </Form.Input>
</template>

我想知道在这个例子中表单组件会是什么样子，以及这样的组件的正确用例是什么，它是否与“槽”有关。

Answer 1

在本例中，form-components指的是一个.js似乎正在导出单文件组件 ( .vue) 的文件。

表单组件.js

export { default as Label } from './form-label.vue'
export { default as Input } from './form-input.vue'

然后您可以通过以下方式访问这些组件：

import * as Form from './form-components'

不过，我建议使用解构分配方法，因为 IDE 可以更好地解释它。

import { Input, Label } from './form-components'