從 Svelte 中的父組件跟蹤子組件組件中的 state（Svelte 中從子組件到父組件的數據流/通信）

Question

由於我對反應式思維方式還很陌生，因此我很難掌握一些基本概念。 我也認為對於這個問題，有很多方法可以解決這個問題，這對於初學者來說是相當艱巨的。 所以這是我的簡單問題：

我有一個父組件和一個子組件。 父組件（目前）唯一要做的就是導入子組件並渲染它。 子組件本身（在單擊時）通過一組文本並顯示它。 當到達終點時，我想卸載這個組件。 但是，據我所知，這通常是由父母完成的。 例如，通過將其包裝在一個偽 if 語句中，如下所示：

{#if childNotFinished}
    <Child/>
{/if}

但我根本不知道最好的方式是與父母溝通孩子“完成”

我的兩個組件看起來像這樣，並且在此處的 repl 中（ https://svelte.dev/repl/c787b13ebe524af8af3d97d71e7c8510?version=3.49.0 ）：

# App.svelte
<script>
import Intro from "./Intro.svelte"
</script>

<Intro></Intro>
<!--
{#if IntroFinished}
Do something new, import a new component, ....
{/if}
-->

# Intro.svelte
<script>
  let currentStep = 0;
  
  let steps = [
    { text: "this" },
    { text: "is" },
    { text: "a" },
    { text: "test" },
  ];

  function showNext() {
    if (currentStep === steps.length - 1) {
      return;
    }
    currentStep++;
  }

  function showPrev() {
    if (currentStep === 0) {
      return;
    }
    currentStep--;
  }
</script>

<button on:click={showPrev}>Last</button>
<button on:click={showNext}>Next</button>

<div>
  {steps[currentStep].text}
</div>

{#if currentStep === steps.length - 1}
  <button>Start New Thing</button>
{/if}

也許有一些關於如何處理這樣的事情的最佳實踐或良好的資源。 或者更一般的關於 svelte 中的數據流（向上和向下）。 感覺每次都有很多新的可能性出現，我不知道該使用哪個以及如何解決這個問題。

Answer 1

在這種情況下，我將使用綁定屬性或事件。

使用屬性方法，您可以在孩子上聲明一個屬性：

export let finished = false;

{#if currentStep === steps.length - 1}
  <button on:click={() => finished = true}>Start New Thing</button>
{/if}

然后可以通過bind:在父級中讀取：

<script>
    import Intro from "./Intro.svelte";
    let finished = false;
</script>

{#if finished == false}
    <Intro bind:finished ></Intro>
{:else}
  Something else
{/if}

---

通過事件，您可以 創建一個調度程序並從子組件調度一個事件：

import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();

{#if currentStep === steps.length - 1}
  <button on:click={() => dispatch('finished')}>Start New Thing</button>
{/if}

然后在父級中處理：

<script>
    import Intro from "./Intro.svelte";
    let finished = false;
</script>

{#if finished == false}
    <Intro on:finished={() => finished = true} ></Intro>
{:else}
  Something else
{/if}

一個事件可能更干凈一些，因為該組件不應該恢復它的 state，所以它沒有真正需要成為一個屬性。