时间戳

首页 > 解决方案 > 是否可以在插槽内制作子组件以将数据发送给其父组件？

svelte - 是否可以在插槽内制作子组件以将数据发送给其父组件？

问题描述

我正在尝试在 Sveltejs 中创建一个表单组件。这个 Form 组件将用于<slot />让他的父级 (App.svelte) 定义哪些 Inputs 和 Buttons 应该在 Form 内。Inputs 和 Buttons 也是组件，一旦 Input 组件的值发生变化，我想更新父 Form 组件内的对象，当单击 Button 时，我想将数据发送回 App 组件。

我试图阅读 Svelte 文档并解决这个问题，<slot let:name={value}>但是当 Input 组件的值发生变化时，我找不到更新 Form 组件的方法。

这是我正在尝试做的结构：

App.svelte

...
<Form on:submit={saveReceivedData}>
  <Input name="..." value="..." />
  <Button />
</Form>
...

Form.svelte

<script>
...
let data = {}
</script>
...
<form>
  <slot />
</form>
...

输入.svelte

...
<input name={name} value={value} on:input={updateDataVariableOnFormComponent} />
...

Button.svelte

...
<button on:click={sendDataVariableToAppComponent}>Send</button>
...

如果需要，我可以尝试向您发送完整的代码。但是，因为我的问题不是“我做错了什么？” 但是“我该怎么做？”，我更喜欢用抽象的方式写我的问题。

标签： svelte

解决方案

当子组件发生变化时，您可以使用组件绑定来更新父组件中的数据：

<Input name="..." bind:value={someValue} />

使用该绑定，someValue在父级中将同步到value子级中。

要通知父级有关子级中的事件，而不是状态更改，您可以使用事件调度程序...

<!-- Button.svelte -->
<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
</script>

<button on:click={() => dispatch('thinghappened', someData)}>Send</button>

...在这种情况下，您可以收听thinghappened事件...

<Button on:thinghappened={e => doSomethingWith(e)}/>

...或者您可以简单地转发 DOM 事件<button on:click>Send</button>并使用 . 监听父级中的 click 事件<Button on:click={handler}/>。

推荐阅读