面试题：Qwik组件开发之数据绑定

Question

在Qwik中，如何在组件内实现数据的双向绑定？请举例说明其具体的实现步骤，包括HTML模板和相应的JavaScript逻辑代码。

Answer 1

1. 安装Qwik：
   • 确保你已经安装了@builder.io/qwik和@builder.io/qwik-city。如果没有，可以使用npm或yarn进行安装：

   npm install @builder.io/qwik @builder.io/qwik - city
   

2. 创建组件：
   • 假设创建一个简单的InputComponent组件来展示双向绑定。
   • HTML模板（.qwik文件）：

   <template>
     <input type="text" bind:value={textValue} />
     <p>You entered: {textValue}</p>
   </template>
   

   • JavaScript逻辑代码（.qwik.ts文件）：

   import { component$, useSignal } from '@builder.io/qwik';
   
   export const InputComponent = component$(() => {
     const textValue = useSignal('');
   
     return (
       <template>
         <input type="text" bind:value={textValue} />
         <p>You entered: {textValue.value}</p>
       </template>
     );
   });
   

   • 在上述代码中：
     • 首先从@builder.io/qwik导入component$和useSignal。component$用于定义Qwik组件，useSignal用于创建可响应的数据信号。
     • 在InputComponent中，通过useSignal('')创建了一个初始值为空字符串的信号textValue。
     • 在HTML模板中，<input>标签使用bind:value={textValue}实现双向绑定，即输入框的值会与textValue信号相互同步。同时，在<p>标签中显示textValue的值。每当输入框的值发生变化，textValue也会相应改变，反之亦然。