为什么在这个 REPL 中:当我使用表单输入更改 App.svelte 中的 https://svelte.dev/repl/0b2fc740a59847c19b2471b4a1459d42?version=3.38.3 名称时,它没有更新?
name
在 Form.svelte 中发生变化。
为什么?
双向绑定不是一直开启吗?
答案 0 :(得分:1)
您从未将父母的 name
绑定到孩子的 name
只是将父级的 name
作为 prop 传递给子级给了子级的 name
一个默认值,但是一旦子级的版本被修改它就会断开连接(此外,如果父级重新渲染,我我 99% 肯定孩子会失去状态)。您需要像这样绑定 name
:
<h1><Form bind:name></Form></h1>
Svelete REPL 链接:https://svelte.dev/repl/30859806c88c449daba8be279fbce537
<!-- App.svelete -->
<script>
import Form from "./Form.svelte";
let name = 'world';
$: console.log("name:", name)
</script>
name in App.svelte: {name}
<!-- **bind the name** -->
<h1><Form bind:name></Form></h1>
<!-- Form.svelete -->
<script>
export let name;
</script>
name in Form.svelte: {name}
<form on:submit|preventDefault>
<input id="name" bind:value={name} />
</form>