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

Question

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

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

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

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

有没有不使用的方法createEventDispatcher？

Answer 1

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