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

Question

我正在尝试让按钮将抽屉组件切换为 open/close。

我在这个REPL

中有一个简化的例子

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

我（不是）做错了什么？

Answer 1

像这样通过 context="module" 在兄弟姐妹之间共享数据时，您必须使用商店。所以

export let isOpen = writable(false)

Answer 2

如果删除 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>

Answer 3

如果其他答案对您没有帮助，请确保 public/index.html 文件中 bundle.js 文件的路径正确。这是我的问题，将路径更改为最近更新的 build.js 文件为我解决了这个问题。

<html>
<head>
    <script defer src='bundle/bundle.js'></script> <!-- Make sure this path is correct -->
</head>

<body>
    <div id="root"></div>
</body>
</html>

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

Svelte UI not updated despite data change

svelte

svelte-3