Как экспортировать функцию из компонента Svelte, которая изменяет значение в компоненте? - PullRequest
Новая
       26

Как экспортировать функцию из компонента Svelte, которая изменяет значение в компоненте?

2 голосов
/ 08 октября 2019

У меня есть компонент с именем WastedTime.svelte со значением wastedTime. Также есть функция для изменения значения на 50 (в моем реальном коде это делает анимацию, но это сокращенный тестовый случай для переполнения стека).

Чтобы позволить дочерней функции вызываться изparent, я использовал <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, которая изменяет значение в компоненте?

1 Ответ

3 голосов
/ 08 октября 2019

<script context="module"> не реагирует - изменения переменных внутри этого блока не влияют на отдельные экземпляры (если только вы не меняли значение хранилища и каждый экземпляр не был подписан на это хранилище).

Вместо этого,экспортируйте функцию changeNumber непосредственно из экземпляра и получите ссылку на нее с помощью bind:this:

WastedTime.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?version=3.12.1

...