Utiliser plusieurs composants Vue dans un seul fichier

Question

Dans la documentation de vue, j'ai vu "Composants d'espace de noms" dans le guide "Paramètres de script" et il est écrit :

Vous pouvez utiliser des balises de composants en pointillés (telles que ) pour référencer des composants imbriqués sous les propriétés de l'objet. Ceci est utile lorsque vous importez plusieurs composants à partir d'un seul fichier :

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

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

J'aimerais savoir à quoi ressemble le composant de formulaire dans cet exemple, quel est le cas d'utilisation correct pour un tel composant et quel est son rapport avec le "slot".

Answer 1

Dans ce cas, form-components fait référence à un .js 文件，该文件似乎正在导出单文件组件 (.vue) .

Composant de formulaire.js

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

Vous pourrez ensuite accéder à ces composants via :

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

Cependant, je recommande d'utiliser la méthode affectation de déstructuration car l'EDI peut mieux l'expliquer.

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