面试题：Svelte父子组件数据传递之绑定基础

Question

在Svelte中，如何使用双向绑定在父子组件间传递数据？请举例说明父组件向子组件传递数据并在子组件修改后反馈到父组件的具体实现步骤。

Answer 1

1. 创建父组件 App.svelte：
   • 首先，定义一个数据变量，并在模板中引入子组件，通过 bind:value 进行双向绑定。

   <script>
       let parentValue = '初始值';
   </script>
   
   <ChildComponent bind:value={parentValue} />
   
   <p>父组件中的值: {parentValue}</p>
   
   <script>
       import ChildComponent from './ChildComponent.svelte';
   </script>
   

2. 创建子组件 ChildComponent.svelte：
   • 在子组件中接收通过 bind:value 传递的数据，并可以对其进行修改。

   <script>
       let value;
       function updateValue() {
           value = '子组件修改后的值';
       }
   </script>
   
   <button on:click={updateValue}>修改值</button>
   <p>子组件接收到的值: {value}</p>
   

在上述例子中，父组件通过 bind:value 将 parentValue 传递给子组件 ChildComponent。子组件可以通过修改 value 来改变这个值，并且这种改变会自动同步到父组件的 parentValue 中，实现了父子组件间的双向绑定数据传递。