我可以在 HTML 页面上有多个 Svelte 组件吗？

Question

是否可以拥有一个纯 HTML 页面并在多个位置注入 Svelte 组件，例如React Portals？所以我不想将 Svelte 用作单页应用程序 (SPA)，而是在现有 HTML 页面上使用 Svelte 组件。是否可以让单独的 Svelte 组件使用事件调度器相互通信，并使用Context API或Svelte 存储共享状态？

我无法控制呈现的 HTML，它来自 CMS。所以像https://github.com/sveltejs/svelte/issues/1849这样的东西将不起作用......我无法使用 Svelte 编译器“编译”HTML 页面。

Answer 1

是的，这是可能的，在您通常安装 Svelte 应用程序的脚本中，target: ...您可以在不同的位置安装多个部分：

new Part1({
  target: mount1
});
new Part2({
  target: mount2
});
...

这些组件将共享同一个存储，但由于它们都是“顶级”组件（例如：它们没有共同的父级），因此您不能使用 ContextAPI，也不能将事件冒泡到父级（无论如何，父级将是哪个） ？）

但是，您可以在窗口级别监听事件：

<svelte:window on:someeeventsomewhere={}></svelte:window>

如果您随后在组件之一的某处引发某个事件，它的侦听器将会接收到该事件。

确切的设置当然取决于您的具体用例。