Svelte

Question

在react中我们可以做到

<SomeListComponent>
  <SomeListComponent.Item /> // Like this
</SomeListComponent>

是否有类似 React 中的点符号的精巧等价物？

Answer 1

没有。

展开它：

<script>
  ...
  const { Item } = SomeListComponent
</script>

<SomeListComponent>
  <Item />
</SomeListComponent>

另请注意，组件名称必须大写（<Item />，而不是 <item /> -- 否则 Svelte 会认为它是 DOM 元素）。

Answer 2

这实际上确实目前看来是可能的。您可以通过在单个文件中定义单个组件来完成此操作。然后，在桶中，文件执行以下操作：

导入主要组件和所有必要的部件。
将所有必要的分段组件作为对象属性附加到主要组件。
单独重新导出主要组件。

我假设您在这种情况下无论如何都会使用桶文件，因为 Svelte doesn't support multiple components in a single file like React（至少在撰写本文时不会）。

Dot Notation Example

另一个选项——如果您试图将组件公开为与主要组件严格相关的东西——是通过slot公开组件。您仍然从在单个文件中创建每个单独的组件开始。但最后，您通过 slot props 在主组件文件而不是桶文件中公开所有子组件。

Example Exposing Components through Slot Props

第一种方法（点符号）的好处是它很熟悉（感谢 React）。假设您只从桶文件 (index.js) 执行导入，那么很明显什么是主要组件以及什么是相关的子组件。缺点是您可以在技术上使用主组件范围之外的子组件。但实际上，不太可能有很多人会这样做，也不是真正的问题。另一个潜在的问题是向导入的模块添加属性很尴尬。

第二种方法 (slot props) 不太熟悉，因为它是 svelte 特定的。但它仍然具有区分主要组件和子组件的好处。作为一个额外的好处，它还防止在主要组件范围之外使用子组件。最后，导入模块没有笨拙的附件。 :) 但是，如果您通过 slot 道具公开大量组件，这种方法可能会失控。而且，当然，只有在您雇用 slot 时才真正有意义。

第二种方法的一个简单用例可能是模态操作按钮（如果您想控制所述按钮的样式并且模态很简单）。

可能存在其他选项。至少，我相信在与主要组件相同的文件中没有涉及本地私有组件的解决方案（同样，在撰写本文时）。

Svelte - 如何使用点符号组件

Svelte - how to use dot notation components