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

Question

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

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

Answer 1

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

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

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

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

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

如果您随后在其中一个组件中提出 someventsomewhere，它将被它的侦听器拾取。

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