Svelte：如何从子组件传递数据或props到父组件？

Question

我会尽力简短地解释。 我有一个主组件app.svelte，里面使用了一个子组件Course.svelte。我使用{#each}块来重复多次相同的组件。问题是我希望app.svelte知道每个单独组件何时被点击。 目前，我在Course.svelte组件中处理on:click事件。这样，App.svelte永远不会知道它。 我该怎么办？

Course.svelte代码片段和我如何处理on:click事件：

<script>
  function handleClick() {
    if (state == courseStates.CLOSED) {
      //Handle closed course
    } else {
      if (state === courseStates.READY) {
        passCourse();
      } else if (state === courseStates.PASS) {
        failCourse();
      }
    }
  }
  function passCourse() {
    state = courseStates.PASS;
  }
  function failCourse() {
    state = courseStates.READY;
  }
</script>

<div on:click={handleClick} class="text-center course btn {buttonClass}">
  <h1>{name}</h1>
  <h4>{code} - {credit} Credit Hours - Term {term}</h4>
</div>

以下是 App.svelte 的一段代码片段，我希望通过点击每个课程来维护其随时间变化的状态：

<div class="row">
    {#each courses as course}
      {#if course.term == term}
        <Course
          state={course.state}
          name={course.name}
          credit={course.credit}
          term={course.term}
          code={course.code}
          on:removecourse={removeCourse} />
      {/if}
    {/each}
  </div>

- OmaRosh

Answer 1

您可以通过在App.svelte中添加bind:state={course.state}来使用双向数据绑定。现在，如果在Course.svelte中更改了值，则App.svelte中的值将被更新。

这里是一个REPL: https://svelte.dev/repl/48649794a7144d63bbde67a2db2f67a9?version=3.24.1 处理这个问题有更好的方法，当使用双向绑定时要小心，因为您很容易破坏数据流。

更好的处理数据流的方法有：

• 从父组件传递函数
• 将整个数据对象传递给子组件
• 使用store
• 使用自定义事件createEventDispatcher

- grohjy