组件的 Svelte 导出功能

Question

我想创建一个在父组件中公开函数的组件。虽然 Svelte 文档指向 context="module"，但该脚本只被调用一次，如果我有多个相同组件的实例，这将破坏功能。

我在网上找到了几个例子，它们都指向一个非常方便的解决方法，在组件中定义导出并用点符号调用它：

// Child.svelte

<script>
        let element
        export function changeColor() {
        console.log(element)
        element.style.backgroundColor = "#" + Math.floor(Math.random() * 16777215).toString(16)
}
</script>

<button bind:this={element}>A button</button>

我创建了一个非常简单的用例，当我将组件绑定到一个变量并使用 child.function 调用它时它可以工作，但是如果我想通过单击组件本身来调用该函数怎么办？

// App.svelte
<script>
    import Child from "./Child.svelte"
    let child
    
</script>
 
<button on:click={() => child.changeColor()}>Click</button>        // This works
<Child bind:this={child} on:click={() => child.changeColor()} />   // This doesn't work

我理解第一个选项背后的逻辑，但是我不明白为什么第二个选项不起作用！应该一样吗？我 bind 将该组件编辑为一个变量，并使用相同的语法调用它。如果不使用调用函数的第二个元素，我怎样才能让它工作？

Answer 1

<Child bind:this={child} on:click={() => child.changeColor()} />

不起作用，因为 on:click 未定义，将其更改为 on:click={() => console.log('test')}

时您可以很容易地看到这一点

它不起作用的原因是因为在 Svelte 事件中不会 'bubble' 组件，如果你想这样做，你必须在 [=21= 中明确指出这一点]

<button bind:this={element} on:click>A button</button>

组件的 Svelte 导出功能

Svelte export function from component

javascript

svelte