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

Question

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

<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。

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

How to generate a component in the template dynamically

javascript

svelte