javascript - 如何在模板中动态生成组件

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 4 年前。

Improve this question

我编写了一个自定义的 svelte 组件。现在，我想使用 javascript 在另一个类中创建该元素。我怎样才能做到这一点？以下是我想让它工作的代码:

<script>
    import component2 from "./Component2.svelte";

    function abc() {
        var element = document.createElement("component2");
        document.getElementById("abc").appendChild(element);
    }
</script>

<div id="abc" use:abc>dsaads</div>

这是一个工作 example .

任何帮助都会很棒。

Answer 1

您可以使用 Svelte 本身而不是使用普通 JS 创建客户端组件。 (来源:docs)

只需更改您的 abc功能如下

<script>
    import Component2 from "./Component2.svelte";

    function abc() {
        const element = new Component2({
            target: document.querySelector('#abc')
        })
    }
</script>

<div id="abc" use:abc>dsaads</div>

这会将组件附加为 <div id="abc"></div> 的最后一个子组件。

这是一个工作 example .