Question

我写了一个自定义的苗条组件。现在，我想使用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。

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

1 个答案: