<input> 从子 Svelte 组件使用在应用程序组件中搜索商店?



我设置了一个Svelte应用程序,这样就有了一个应用程序组件、一个图表组件和一个标题组件。

应用程序组件提取数据。图表组件显示数据。

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

我还没到。这是我正在进行的工作。

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

我只想能够在Header中使用<input>

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

欢迎大家帮忙。

同样,这是REPL。

当前您正在将头中的值绑定到存储,而您的本地搜索输入绑定到search,然后用于过滤

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

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

<Header bind:value={search}>

最新更新