vue multiple components in a single file-CodePudding

in vue documents I saw "Namespaced Components" in "script setup" guide it writes:

You can use component tags with dots like <Foo.Bar> to refer to components nested under object properties. This is useful when you import multiple components from a single file:

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

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

I wanted to know in this example what will the form-component look like, and what is the correct use case for such a component, does it have anything to do with "slot" or not.

CodePudding user response：

In this case, form-components refers to a .js file that seems to be exporting single-file components (.vue).

form-components.js

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

You can then access these components via:

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

However, I recommend using a destructuring assignment methodology, as it is better interpreted by IDEs.

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