best/most 与 Svelte 中的组件通信的惯用方式是什么？

Question

我正在尝试了解如何与 Svelte 组件进行通信。在我的应用程序中，我创建了两个组件。其中之一，Antescript.svelte，我使用 bind 与 App.svelte 通信；另一方面，Postscript.svelte，我使用 dispatch.

进行通信

一种方法优于另一种方法吗？

我可能会在使用 on 方法而不是其他方法时遇到问题？

dispatch 方法肯定需要更多编码，这是个问题吗？

REPL

App.svelte

<h1>{antescript} {junction} {postscript}</h1>
<div>
    <AnteScript bind:antescript={antescript}/>
</div>
<div>
    <PostScript on:message={postscriptChanged} {postscript}/>
</div>

<script>
import AnteScript from "./AnteScript.svelte";
import PostScript from "./PostScript.svelte";
    
    let antescript = 'start';
    let junction = 'and';
    let postscript = 'finish';
    
    function postscriptChanged(event) {
        postscript = event.detail.text;
    }
</script>

AnteScript.svelte

<input type="text" bind:value={antescript} />

<script>
    export let antescript;
</script>

PostScript.svelte

<input id="postscript" type="text" on:input={textChanged} value={postscript}/>

<script>
    import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();
    
    export let postscript;
    
    function textChanged() {
    let postscript_input = document.getElementById("postscript");
    dispatch('message', {
        text: postscript_input.value
    });
    }
</script>

Answer 1

Svelte 提出了多种组件间通信方式。这主要取决于组件之间的关系以及组件应如何应对变化：

从父组件向直接子组件传达值，您可以使用 properties and binding
从一个子组件到它的父组件，events可以使用
从父组件向间接子组件传递值，您可以使用 context
对于所有组件之间的全局通信，将使用stores

下面的文章将为您详细介绍： https://betterprogramming.pub/6-ways-to-do-component-communications-in-svelte-b3f2a483913c

你处理它的方式似乎完全没问题，这是 API 的问题。但是您也可以绑定 postscript 值，不是吗？

best/most 与 Svelte 中的组件通信的惯用方式是什么？

Which is the best/most idiomatic way to communicate with components in Svelte?

svelte