尽管数据发生变化，Svelte UI 仍未更新

Question

我正在尝试使用按钮切换抽屉组件以打开/关闭。

我在这个REPL中有一个简化的例子

我当前正在使用一个导出函数的模块上下文，以便两个组件的父组件都可以调用它。函数被调用，数据被更新，但 UI 不会对此使用react。

我做错了什么(没有)？ 🧐

Answer 1

如果删除 context="module" 部分，您可以将函数导出为变量，并在父级上使用 bind:toggleSomeComp。

示例:

<!-- SomeComp.svelte -->
<script>
    let isOpen = false;
    export const toggleSomeComp = () => {
        isOpen = !isOpen;
        console.log('toggle called, isOpen now = ', isOpen);
    }
</script>

<hr/>
someComp isOpen? -> {isOpen}

<!-- App.svelte -->
<script>
    import Button from './Button.svelte';
    import SomeComp from './SomeComp.svelte';
    let name = 'world';
    let toggleSomeComp;
</script>

<h1>Hello {name}!</h1>

<Button on:clicked={() => toggleSomeComp()}>
    Button is sibling of SomeComp
</Button>

<SomeComp bind:toggleSomeComp></SomeComp>