Svelte 命名空间组件导出

Question

在文档中有一个 Tags section 有这样的东西：

A lowercase tag, like <div>, denotes a regular HTML element. A capitalised tag, such as <Widget> or <Namespace.Widget>, indicates a component.

如何导出这样的<Namespace.Widget>或<Namespace.Whatever>？

Answer 1

所以我认为这指的是当您从单个 .js 文件导出多个 .svelte 文件并将它们全部导入另一个组件中的单个命名空间下时......这不是很有据可查，但它有效。

如果你的项目结构如下：

─ src/
  ├── child/
  │   ├── index.js
  │   ├── One.svelte
  │   └── Two.svelte
  └── Parent.svelte

在 child/index.js 中导出同一文件夹中的 2 个组件：

export { default as One } from './One.svelte'
export { default as Two } from './Two.svelte'

然后在 Parent.svelte 中导入单个命名空间下的所有组件，而不是导入每个单独的组件：

<script>
  import * as Something from './child'
</script>

<Something.One />
<Something.Two />

您可以像这样测试 REPL 中的功能 https://svelte.dev/repl/18f41adb56fa46ff8b25cad7c1a388a4?version=3.38.3 如果没有适当的文件结构，它就没有那么有用了。

Svelte namespace components export