Могу ли я иметь несколько компонентов Svelte на странице HTML?

Question

Можно ли иметь простую страницу HTML и вставлять компоненты Svelte в нескольких местах, например, React Portals ? Поэтому я не хочу использовать Svelte в качестве одностраничного приложения (SPA), а использовать компоненты Svelte на существующих HTML страницах. И можно ли позволить отдельным компонентам Svelte обмениваться данными друг с другом с помощью диспетчера событий и совместно использовать состояние с помощью Context API или Svelte store ?

Я не контролирую обработанный HTML, он поступает из CMS. Так что что-то вроде https://github.com/sveltejs/svelte/issues/1849 не будет работать ... Я не могу "скомпилировать" страницу HTML с помощью компилятора Svelte.

Answer 1

Да, это возможно, в сценарии, где вы обычно монтируете свое приложение Svelte с помощью target: ..., вы можете монтировать несколько деталей в разных местах:

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

Все эти компоненты будут находиться в одном хранилище, но поскольку все они являются компонентами «верхнего уровня» (например, у них нет общего родителя), вы не можете использовать ContextAPI, а также не можете передавать события родительскому объекту (каким родителем это будет в любом случае?)

Вы можете однако слушайте события на уровне окна:

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

Если вы затем поднимете someventsomewhere в одном из ваших компонентов, он будет воспринят слушателями.

Точная настройка, конечно, будет зависеть от вашего конкретного случая использования.