Let's say an Outer component contains an Inner component, and we want an event from the Inner component to be propagated to the Outer component. Without using the store, there are 2 ways to do this:

Method 1: Event forwarding using dispatcher
-------------------------------------------

Inner.svelte: Use Svelte's dispatcher to dispatch a repackaged version of the original event:

```js
<input type="text" on:input={callDispatcher} />

const dispatcher = createEventDispatcher();

function callDispatcher(e) {
    dispatcher("mymsg", {
        foo: e.target.value
    });
}

```

Outer.svelte: Listen for Inner's dispatched event:

```js
<Inner on:mymsg={handler} />

function handler(e) {
    alert(e.detail.foo);
}

```

Method 2: Pass Outer's handler directly to Inner
------------------------------------------------

Inner.svelte: Accepts handler passed in by Outer:

```js
export let externalHandler;
<input type="text" on:input={externalHandler} />

```

Outer.svelte: When Inner event of interest occurs, it will call Outer's handler:

```js
<Inner externalHandler={handler} />

function handler(e) {
    alert(e.target.value);
}

```

Question
--------

Which one is a better practice? Method 1's dispatcher seems to be an unnecessary middle-layer that not only adds more code but also loses the original event information. But strangely, the Svelte tutorial mentions Method 1 instead of Method 2.