Svelte：如何将数据或道具从子组件传递给父组件？答案

【问题标题】：Svelte: How to pass data or props from a child component to the parent?Svelte：如何将数据或道具从子组件传递给父组件？
【发布时间】：2020-09-01 23:45:15
【问题描述】：

我会尽量简短。我有主要组件 app.svelte。在其中，我使用了一个名为 Course.svelte 的子组件。我正在使用 {#each} 块多次重复相同的组件。问题是我希望 app.svelte 在单个组件打开时知道：单击。现在我正在处理 Course.svelte 组件中的 on:click 事件。像这样，App.svelte 永远不会知道它。我该怎么办？

Course.svelte 的 sn-p 以及我如何处理 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 的 sn-p，我想通过单击课程来维护每门课程的状态，因为它随着时间的推移而变化：

<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>

【问题讨论】：

标签： javascript svelte svelte-3 svelte-component

【解决方案1】：

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

这是一个 REPL：
https://svelte.dev/repl/48649794a7144d63bbde67a2db2f67a9?version=3.24.1

有更好的方法来处理这个问题，你应该小心何时使用双向绑定。使用双向绑定，你会很容易弄乱你的数据流。

处理数据流的更好方法：

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

【讨论】：