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

Posted 2023-03-10

【中文标题】我可以在 HTML 页面上有多个 Svelte 组件吗？

【英文标题】：Can I have multiple Svelte components on HTML page?

【发布时间】：2020-05-23 02:35:15

【问题描述】：

是否可以有一个纯 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 页面。

【参考方案1】：

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

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

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

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

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

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

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

【讨论】：

好吧，这听起来很有希望！但是当我无法控制“挂载点”的数量时，是否可以在运行时进行挂载，因此选择具有特定类的所有 DOM 元素并在所有这些 DOM 元素上挂载特定组件？我可以安装在已经包含（服务器端呈现的）HTML 的 DOM 元素上并接管控制权吗？

您可以使用 querySelector 并遍历结果以挂载 Svelte 组件，对于现有的 DOM 内容，请查看文档中的 'hydratable' 选项。

伟大的见解！我完成谜题的最后一个问题：是否可以将动态行为应用于某些现有标记，就像 Vue 使用 v-bind 和 v-on 所描述的那样在vuejs.org/v2/guide/syntax.html#v-bind-Shorthand

不，那不可能。除非您使用查询选择器和 innerhtml/-text 手动执行，否则 Svelte 不会执行预先存在的标记。