Svelte3点击tab报Function called outside component initialization错误如何解决

问题成因 #

该报错是因为错误使用了Svelte的createEventDispatcher方法：

• Svelte要求createEventDispatcher必须在组件初始化阶段（即<script>标签的顶层同步执行阶段）调用，才能绑定当前组件实例生成可用的dispatch方法
• 你写的const dispatch = createEventDispatcher仅将createEventDispatcher函数本身赋值给了dispatch变量，没有在初始化阶段执行调用
• 等到点击tab触发事件回调时才会实际执行createEventDispatcher，此时已经脱离了组件初始化上下文，因此抛出对应错误

修复方案 #

仅需要修改Tabs.svelte中createEventDispatcher的调用逻辑，在初始化阶段就执行调用生成dispatch函数即可：

<script>
  import { createEventDispatcher } from "svelte";
  // 初始化阶段直接调用生成dispatch方法
  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>

修改后点击tab即可正常触发自定义事件，不会再抛出初始化相关错误。

内容的提问来源于stack exchange，提问作者MBH