19

我有一个名为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 组件中导出更改组件中值的函数？

4

3 回答 3

28

<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

于 2019-10-08T14:41:33.037 回答
3

嗯，这是一个该死的好问题！

我的第一次尝试：

onMount我已经尝试过@Rich Harris 的回答（从组件中导出一个函数，在使用带有事件侦听器的组件时绑定它）。这个概念确实很可靠，但我的问题有点复杂——我试图传递一个带有参数的事件，以便从外部调用。是的-这个参数是使用{#await}..伪造的，所以...这种方法不走运

我的第二次尝试：

在了解了有关 svelte 如何处理事件的更多信息（我是 svelte 的新手并随着我的进步而学习）之后，我发现了这篇很棒的文章。简而言之：让我们的组件真正面向事件！在您的问题中-您实际上正在尝试实施onload事件……所以..我们为什么不这样做呢？

组件.svelte

<script>
  import { createEventDispatcher, onMount } from 'svelte';
  const dispatch = createEventDispatcher();

  function doSomething() { console.log('wowza!') }
  
  // wait for onMount to trigger, then dispatch event named "load"
  onMount(() => dispatch('load', 
  { 
    data: 'yay',
    doSomething
  }));
</script>

应用程序.svelte

<script>
  import { Component } from './component.svelte';

  function component_load(event)
  {
    console.log(event.detail.data);
    event.detail.doSomething();
  }
</script>
<Component on:load={component_load} />

所以 - 是的，我今天学到了一些东西！还：

  • 这是一种更优雅的编码方式（事件驱动）
  • 组件通过正确使用 Svelte 事件生命周期来暴露自己
  • dispatch可以响应其他事件触发 - 让您为组件构建完整的生命周期

惊人！

于 2020-11-26T21:25:05.730 回答
3

丰富的答案的简化版本：

App.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}

时间.svelte

<script>
export var time = 0;
export function spendTime() {
  time += 50;
}
</script>

这里的关键是export function。

于 2021-05-05T16:00:52.917 回答