我如何从Svelte组件导出函数以更改组件中的值？

Question

我有一个名为WastedTime.svelte的组件，其值为wastedTime。还有一个将值更改为50的功能（在我的真实代码中，这是一个动画，但这是堆栈溢出的简化测试用例）。

为了允许从父级调用子级功能，我根据Svelte文档使用了<script context="module">：

<script context="module">
    var wastedTime = 0;
    export function changeNumber(){
        console.log('changing number')
        wastedTime = 50
    }
</script>

<script>
    // Putting 'var wastedTime = 0' here doesn't work either
</script>


<h1>Wasted time: {wastedTime}</h1>

父从onMount调用子中的函数：

<script>

    import { onMount } from 'svelte';
    import WastedTime, {changeNumber } from './WastedTime.svelte';

    onMount(() => {
        changeNumber()
    });
</script>

<WastedTime />

问题是，由于wastedTime是在<script context="module">中引用的，因此似乎无法更改wastedTime。导出的函数运行，但是wastedTime保持为0。

Copy of this on Svelte REPL

我尝试过：-将var wastedTime = 0放入<script context="module">-将var wastedTime = 0放入<script>

均无效。

我如何从Svelte组件导出函数以更改组件中的值？

Answer 1

[<script context="module">是非反应性的-在此块中更改变量不会影响单个实例（除非您正在更改商店值，并且每个实例都订阅了该商店）。

相反，直接从实例中导出changeNumber函数，并使用bind:this对其进行引用：

bind:this

<!-- WastedTime.svelte -->
<script>
    var wastedTime = 0;
    export function changeNumber(){
        console.log('changing number')
        wastedTime = 50
    }
</script>

<h1>Wasted time: {wastedTime}</h1>

演示在这里：

<!-- App.svelte -->
<script>
    import { onMount } from 'svelte';
    import WastedTime from './WastedTime.svelte';

    let wastedTime;

    onMount(() => {
        wastedTime.changeNumber()
    });
</script>

<WastedTime bind:this={wastedTime} />