从函数而不是 DOM 元素将 DOM 事件从子级调度到父级（没有 createEventDispatcher）

【问题标题】：Dispatch DOM event from children to parent from function not DOM element (without createEventDispatcher)从函数而不是 DOM 元素将 DOM 事件从子级调度到父级（没有 createEventDispatcher）
【发布时间】：2020-11-28 13:22:40
【问题描述】：

我试图了解在内部调用函数后是否有办法将 DOM 事件（表单的事件）转发给父级。

REPL：https://svelte.dev/repl/8eb540552faa4651a398b182fa5cdd48?version=3.24.1

如您所见，我在Form.svelte 中使用<form on:submit|preventDefault={validate}> 调用validate()。

之后我需要重新调度事件/调用父级App.svelte中的handleOnSubmit()。

有没有办法不用createEventDispatcher？

【问题讨论】：

使用createEventDispatcher有什么问题？

标签： javascript svelte svelte-3 svelte-component svelte-store

【解决方案1】：

如何将<form> 元素定义为导出，然后您可以在其父级中使用它并定义onsubmit 事件监听器？您可以在<form> 上使用export let form; 和bind:this={form}。

在 Form.svelte 中：

<script>
    export let form;
    
    function validate() {
        console.log("I'm the validate() function")
    }
</script>

<form bind:this={form} on:submit|preventDefault={validate}>
    <input>
    <button type="submit">
        Please save me
    </button>
</form>

在 App.svelte 中：

<script>
    import Form from "./Form.svelte"
    import {onMount} from "svelte"
    
    let form;
    
    onMount(()=> {
        form.onsubmit = handleOnSubmit
    })
    
    function handleOnSubmit() {
        console.log("I'm the handleOnSubmit() in App.svelte")
    }
</script>

<Form bind:form={form} on:submit={handleOnSubmit}>
</Form>

【讨论】：