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

【问题标题】：Dispatched function called outside component initialization调用外部组件初始化的调度函数
【发布时间】：2021-09-16 00:57:50
【问题描述】：

我正在从 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)

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

【问题讨论】：

我意识到我没有启动调度程序，因为我忘记了括号。因此，只需将() 添加到const dispatch = createEventDispatcher 即可解决问题。我不会删除这个问题，因为其他人也可能犯这个愚蠢的错误并从这个提示中受益。

标签： javascript svelte svelte-3

【解决方案1】：

你忘了打电话给createEventDispatcher：

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

...

【讨论】：