Qwik组件如何实现双向属性绑定？

在Qwik中可以实现双向属性绑定，但不能直接修改props——这就是你遇到props are immutable错误的原因，Qwik的props是只读的，子组件必须通过回调通知父组件更新状态，而非直接修改props。

正确实现方式 #

不需要使用完整的store，用Qwik的useSignal（处理简单值）+ 回调机制即可，配合Qwik的bind:语法可以简化双向绑定的使用。

1. 子组件SizeInput实现

定义props时需要包含value和对应的回调（遵循Qwik双向绑定约定，命名为valueChange），在输入变化时调用回调通知父组件更新值：

import { component$, $ } from '@builder.io/qwik';

type SizeInputProps = {
  value: number;
  valueChange: (newValue: number) => void;
};

export const SizeInput = component$((props: SizeInputProps) => {
  // 处理数值输入变化
  const handleInputChange = $( (event: Event) => {
    const input = event.target as HTMLInputElement;
    const newValue = Number(input.value);
    props.valueChange(newValue);
  });

  return (
    <>
      <input 
        type="number" 
        value={props.value}
        onChange$={handleInputChange}
      />
      <select>
        <option>Unit 1</option>
        <option>Unit 2</option>
      </select>
    </>
  );
});

2. 父组件使用（双向绑定语法）

父组件用useSignal创建响应式状态，通过bind:value语法实现双向绑定，Qwik会自动关联value和valueChange回调：

import { component$, useSignal } from '@builder.io/qwik';
import { SizeInput } from './SizeInput';

export default component$(() => {
  const size = useSignal(10);
  return (
    <div>
      Size: <SizeInput bind:value={size.value} />
    </div>
  );
});

关键说明 #

• 如果你不想用bind:语法，也可以手动传递回调：

  <SizeInput 
    value={size.value} 
    valueChange={(newVal) => size.value = newVal} 
  />
  

• $()是Qwik的QRL函数，用于包裹事件回调，确保Qwik的按需加载和序列化机制正常工作，这是处理交互逻辑时的必要操作。
• 只有当你需要处理复杂对象状态时，才需要使用useStore；简单数值用useSignal完全足够。

内容的提问来源于stack exchange，提问作者CHF