调用外部组件初始化的调度函数

Question

我正在从 this 很棒的教程中学习 svelte 3。所以我创建了一个选项卡组件，例如：

<script>
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher;
  export let items;
  export let activeItem;
</script>

<ul class="tab tab-block">
  {#each items as item}
    <li on:click={() => dispatch("tabChange", item)}>
      <div class:active={item === activeItem}>
        {item}
      </div>
    </li>
  {/each}
</ul>

并且我在父组件中导入了Projects.svelte:

<script>
import Tabs from "./Tabs.svelte";
  let items = ["Projects", "Users"];
  let activeItem = "Projects";
//...
  const tabChange = (e) => {
    activeItem = e.detail;
  };
</script>

<Tabs {activeItem} {items} on:tabChange={tabChange} />

我看到 svelte 的编译没有错误，活动和非活动选项卡都呈现得很好。但是，当我单击一个选项卡时，我收到此错误：

index.mjs:938 Uncaught Error: Function called outside component initialization
    at get_current_component (index.mjs:938)
    at createEventDispatcher (index.mjs:954)
    at Array.click_handler (Tabs.svelte:10)
    at HTMLLIElement.click_handler (Tabs.svelte:12)

我想知道可能出了什么问题，我该如何解决？

Answer 1

您忘记拨打createEventDispatcher:

<script>
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher(); // <-- () was missing
  // ..
</script>

...

调用外部组件初始化的调度函数

Dispatched function called outside component initialization

javascript

svelte

svelte-3