如何在 svelte js 中将多个组件导入 main.js？

Question

如何将 svelte 组件导入到不同于 body 的“目标”？

https://github.com/sveltejs/template/blob/master/src/main.js

我正在尝试下一个：

import App from './App.svelte';
export default new App({ target: document.body.div});

如何将多个组件导出到不同的目标？

import App1 from './App1.svelte';
import App2 from './App2.svelte';
export default new App1({ target: document.body.div1});   
export default new App2({ target: document.body.div2});

Answer 1

您可以使用named exports，例如：

import App1 from './App1.svelte';
import App2 from './App2.svelte';

export const app1 = new App1({ target: document.getElementById("app1")});   
export const app2 = new App2({ target: document.getElementById("app2")});

并且在您的 html 中，您需要具有以下元素：

<div id="app1"></div>
<div id="app2"></div>

Answer 2

您可以将“const”对象而不是“默认”导出到 html 元素 #ids with document.getElementById() 或 body 标签名称 with document.getElementsByTagName()

import App1 from './App1.svelte';
import App2 from './App2.svelte';

export const app1 = new App1({ target: document.getElementById("div1") });   
export const app2 = new App2({ target: document.getElementById("div2") });