通过向父组件调度事件来更改组件答案

【问题标题】：Changing components via dispatching event to parent component通过向父组件调度事件来更改组件
【发布时间】：2021-07-23 20:33:54
【问题描述】：

我为此创建了一个沙箱，因为它在那里更容易理解。
https://codesandbox.io/s/svelte-playground-forked-dz7x8?file=/Page1.svelte

我目前正在尝试通过将组件传递给事件调度程序来更改在主页上显示的组件。

    import Page2 from "./Page2.svelte"

    let dispatch = createEventDispatcher;
    function clickHandler(){
        dispatch("changeView", Page2)
    }
</script>
<main>
  <button on:click={clickHandler}>To Page 2</button>
  <h1> Page 1 </h1>
</main>

当它被调度时，它由父组件 App.svelte 处理，然后更改
<svelte:component this={view} on:changeView={changeView} />

中的组件

  let view = Page1
  const changeView = (e) => {
    view = e.detail;
  }
</script>
<main>

  <svelte:component this={view} on:changeView={changeView} />

</main>

但我收到的错误是：
未捕获的错误：在组件初始化之外调用的函数。

我觉得我遗漏了一些明显的东西，任何关于如何以类似方式在页面之间进行更改的帮助都会有很大帮助。

【问题讨论】：

是的，您错过了呼叫 fn createEventDispatcher()。一切看起来都不错！
@GolamrabbiAzad 谢谢你，我已经改变了它，它现在可以工作了。

标签： svelte

【解决方案1】：

正如@Golamrabbi-azad 所指出的，我在第1 页和第2 页的createEventDispatcher 之后错过了一些该死的括号......

let dispatch = createEventDispatcher; //should be
let dispatch = createEventDispatcher();

谢谢！

【讨论】：