在組件內部包含 HTML - 纖細

Question

我一直很好奇如何在 Svelte 中做的一件事是在使用 svelte 的地方包含一個組件的 HTML 子項，如下所示：

<Popup>
  <h1>Hello World</h1>
</Popup>

我做了一些研究，我看到富有的哈里斯正在用他纖細的立方體框架來做這件事。

Answer 1

您可能想了解有關插槽的更多信息。

App.svelte

<script>
  import Popup from './lib/Popup.svelte';
</script>

<Popup>
  <h1>Hello World</h1>
</Popup>

Popup.svelte

<div>
  <slot>
    This is fallback content when no content is provided
  </slot>
</div>