通过将事件分派给父组件来更改组件

Question

我为此创建了一个沙箱，因为在那里更容易理解
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>

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

我觉得我错过了一些显而易见的东西，任何关于如何以类似的方式在页面之间切换的帮助都将是一个很大的帮助。

Answer 1

正如@Golamrabbi azad所指出的，我在第1页和第2页的createEventDispatcher后遗漏了一些带血的括号…

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

谢谢！