Svelte - 如何使用点符号组件答案

【问题标题】：Svelte - how to use dot notation componentsSvelte - 如何使用点符号组件
【发布时间】：2021-12-28 11:55:00
【问题描述】：

在反应中我们可以做到

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

是否有类似 react 中的点表示法的等价物？

【问题讨论】：

标签： svelte

【解决方案1】：

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

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

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

Dot Notation Example

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

Example Exposing Components through Slot Props

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

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

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

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

【讨论】：

【解决方案2】：

没有。

打开它：

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

<SomeListComponent>
  <Item />
</SomeListComponent>

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

【讨论】：