如何绑定来自 Svelte 子组件的输入值？

Question

理想的

我想从子组件获取输入数据。

我试过的

<script>
  import Input from "./Input.svelte";
  let userGoal = "";
</script>

<h1>Your Goal is {userGoal}</h1>

<Input {userGoal} />

<script>
  export let userGoal = "";

  $: console.log(userGoal);
</script>

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

$: console.log(userGoal);正如我预期的那样，在每个事件中都显示 userGoal。但是，它不会影响父组件。

概括

我是 Svelte 的新手。任何帮助表示赞赏。

Answer 1

只需更改<Input {userGoal}/>为：

<Input bind:userGoal/>

演示在这里。如果您想在父级中将其称为其他名称，请执行bind:userGoal={somethingElse}.

这是一个关于组件绑定的教程。