通过 Svelte 中的道具将可写存储值从父组件传递到子组件

Question

我是 svelte 的新手，我正在尝试了解最佳实践。我想创建一个我可以在整个应用程序中使用的动态表单组件。表单的每个实例都将具有相同的样式 - 但每个表单将绑定到商店中的不同输入值，将具有不同的提交逻辑等。

这是一个简单的例子（不起作用）：

App.svelte

<script>
  import store from "./store";
  import Form from "./Form.svelte";

  const { inputValueA, inputValueB } = store;

  const handleSubmitA = () => {
    alert($inputValueA);
  };

  const handleSubmitB = () => {
    alert($inputValueB);
  };
</script>

<div>
  <Form
    inputValue={$inputValueA}
    labelText="form input a"
    handleSubmit={handleSubmitA}
  />
  <Form
    inputValue={$inputValueB}
    labelText="form input b"
    handleSubmit={handleSubmitB}
  />
</div>

Form.svelte

<script>
  export let handleSubmit = () => null;
  export let inputValue = "";
  export let labelText = "";
</script>

<form>
  <label for="input">{labelText}</label>
  <input id="input" type="text" value={inputValue} />
  <button on:click|preventDefault={handleSubmit}>submit</button>
</form>

这个例子不起作用，我不相信 inputValue 属性没有正确绑定到文本输入。有没有经验丰富的人愿意分享你如何处理这个问题？

这是一个沙盒：
https://codesandbox.io/s/svelte-form-component-ujnwki

告诉我你的建议！谢谢

Answer 1

不太确定您的问题到底是什么，但这里是您的示例的修复程序以使其正常工作：

您必须 bind 组件的值才能从子组件更改它

bind:inputValue={$inputValueA}

和bind输入本身的值以使其值反应

bind:value={inputValue}

通过 Svelte 中的道具将可写存储值从父组件传递到子组件

Passing writable store values from parent to child component via props in Svelte

javascript

svelte