使用 child Svelte 组件中的 <input> 在 App 组件中搜索商店?

Use <input> from child Svelte component to search store in App component?

我设置了一个 Svelte 应用程序,因此有一个应用程序组件、一个图表组件和一个 Header 组件。

App组件拉取数据。图表组件显示数据。

Header 组件有一个 <input>。我希望能够在该输入中的 Header 组件中输入搜索字符串,并让它过滤 App 组件中的数据。

我还没到。这里是 my work in progress.

现在,我的 App 组件中也有一个 <input>。那个正确地过滤了我在图表组件中显示的数据。

我只想在 Header 中使用 <input>

我找到了如何将 header 输入文本绑定到应用程序,如我的 REPL 中所示,但我如何将该文本用作变量?

非常欢迎大家的帮助。

同样,这里是 REPL

目前您正在将 header 中的值绑定到商店,而您的 local 搜索输入绑定到 search,然后您将其用于过滤

<Header bind:value={$store} />
<input bind:value={search}>

但是您实际上并没有对这家商店做任何事情,甚至不确定为什么它是一家商店,因为您在这里不需要那部分。没有什么能阻止您在组件中使用绑定来连接到常规值

<Header bind:value={search}>