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 App的脚本中，您可以在不同位置安装多个部件：

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

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

不过，您可以在窗口级别监听事件：

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

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

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

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

1 个答案: