Menggunakan berbilang komponen Vue dalam satu fail

Question

Dalam dokumentasi vue saya melihat "Komponen Ruang Nama" dalam panduan "Tetapan Skrip" dan tertulis:

Anda boleh menggunakan teg komponen bertitik (seperti ) untuk merujuk komponen yang bersarang di bawah sifat objek. Ini berguna apabila anda mengimport berbilang komponen daripada satu fail:

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

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

Saya ingin tahu rupa komponen bentuk dalam contoh ini, dan apakah kes penggunaan yang betul untuk komponen sedemikian, dan bagaimana ia berkaitan dengan "slot".

Answer 1

Dalam kes ini, komponen bentuk merujuk kepada .js 文件，该文件似乎正在导出单文件组件 (.vue) .

Borang komponen.js

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

Anda kemudian boleh mengakses komponen ini melalui:

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

Namun, saya syorkan menggunakan kaedah memusnahkan tugasan kerana IDE boleh menerangkannya dengan lebih baik.

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