为什么这个父变量没有改变？

Question

为什么在这个 REPL 中：https://svelte.dev/repl/0b2fc740a59847c19b2471b4a1459d42?version=3.38.3 在 App.svelte 中的名称在我用表单输入更改时没有更新？

name 在 Form.svelte 变化。

为什么？

双向绑定不是一直都在吗？

Answer 1

您从未将 parent 的 name 绑定到 child 的 name

只是将 parent 的 name 作为属性传递给 child 给了 child 的 name 一个默认值，但是一旦 child 的版本被修改，它就会断开连接（另外，如果 parent 重新渲染，我 99% 确定 child 会丢失状态）。您需要像这样绑定 name：

<h1><Form bind:name></Form></h1>

苗条的 REPL link：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>

为什么这个父变量没有改变？

Why is this parent variable not changing?

javascript

svelte

svelte-3

two-way-binding