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

Question

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

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

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

Svelte REPL 上的副本

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

两者都不起作用。

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

Answer 1

<script context="module"> 不是反应性的——更改此块内的变量不会影响单个实例（除非您更改了存储值，并且每个实例都订阅了该存储）。

相反，changeNumber直接从实例中导出函数，并使用以下命令获取对它的引用bind:this：

浪费时间.svelte

<script>
    var someNumber = 0;
    export function changeNumber(){
        console.log('changing number')
        someNumber = 56
    }
</script>

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

App.svelte

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

    let wastedTimeComponent;

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

<WastedTime bind:this={wastedTimeComponent} />

演示在这里：https : //svelte.dev/repl/f5304fef5c6e43edb8bf0d25d634f965

Answer 2

Rich答案的简化版本：

应用程序.svelte

<script>
import Time from './Time.svelte';

let timeComponent;
let time;
</script>

<Time bind:this={timeComponent} bind:time />

<h1>Spent time: {time} ms</h1>

{#if timeComponent}
  <button on:click={() => timeComponent.spendTime() }>Click me</button>
{:else}
  Loading...
{/if}

时间纤细

<script>
import Time from './Time.svelte';

let timeComponent;
let time;
</script>

<Time bind:this={timeComponent} bind:time />

<h1>Spent time: {time} ms</h1>

{#if timeComponent}
  <button on:click={() => timeComponent.spendTime() }>Click me</button>
{:else}
  Loading...
{/if}

这里的关键是export function。