在一個檔案中使用多個Vue元件

Question

在vue文件中，我在“腳本設定”指南中看到了“命名空間元件”，它寫道：

您可以使用帶點的元件標籤（如 ）來引用嵌套在物件屬性下的元件。當您從單一檔案匯入多個元件時，這非常有用：

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

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

我想知道在這個例子中表單元件是什麼樣子，以及這樣一個元件的正確用例是什麼，它與「slot」有什麼關係。

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'