时间戳

首页 > 解决方案 > 如何从 Svelte 组件中导出更改组件中值的函数？

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

问题描述

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

为了允许从父级调用子函数，我使用<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 组件中导出更改组件中值的函数？

标签： javascriptsveltesvelte-component

解决方案

<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

推荐阅读