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

【问题标题】：How to import multiple components to main.js in svelte js?如何在 svelte js 中将多个组件导入 main.js？
【发布时间】：2022-02-06 15:18:20
【问题描述】：

如何将一个纤细的组件导入到与 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});

【问题讨论】：

标签： javascript svelte svelte-component

【解决方案1】：

您可以使用 document.getElementById() 将“const”对象而不是“default”导出到 html 元素 #ids 或使用 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") });

【讨论】：

【解决方案2】：

你可以使用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>

【讨论】：

导出有效，但目标无效。怎么能定位到一个div的文档呢？谢谢。
你可以使用document.getElementById获取目标元素。