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

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>

这是一个工作示例。

任何帮助都会很棒。

Answer 1

您可以使用 Svelte 本身而不是使用普通 JS 创建客户端组件。（来源：文档）

只需更改您的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>

这是一个工作示例。