javascript - 如何绑定(bind)Svelte中子组件的输入值？

理想

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

我尝试过的

<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的新手。
任何帮助表示赞赏。

最佳答案

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

<Input bind:userGoal/>

Demo here。如果要在父级中以其他方式调用它，请执行bind:userGoal={somethingElse}。

Here's a tutorial关于组件绑定。