面试题：Qwik中如何处理子组件向父组件的反向数据传递

1. 事件机制

在Qwik框架中，子组件向父组件传递数据主要通过自定义事件机制。子组件触发一个自定义事件，父组件监听这个事件并在事件触发时获取子组件传递的数据。

2. 代码实现思路

子组件：
- 使用 useEvent 钩子来创建和触发自定义事件。例如，假设子组件有一个按钮，点击按钮时要向父组件传递数据：

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

export const ChildComponent = component$(() => {
  const handleClick = useEvent((e) => {
    const dataToSend = 'Hello from child';
    // 触发自定义事件 'child - data - passed'
    e.target.dispatchEvent(new CustomEvent('child - data - passed', { detail: dataToSend }));
  });

  return <button onClick={handleClick}>Send data to parent</button>;
});

父组件：
- 在父组件中使用 on:custom - event - name 语法来监听子组件触发的自定义事件。

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

export const ParentComponent = component$(() => {
  const handleChildData = (e: CustomEvent<string>) => {
    console.log('Received data from child:', e.detail);
  };

  return (
    <div>
      <ChildComponent on:child - data - passed={handleChildData} />
    </div>
  );
});

3. 实际项目中的应用场景

表单交互：例如在一个复杂表单中，子组件可能是一个日期选择器、下拉框等表单元素。当用户在子组件中选择了一个值（如日期），子组件可以将这个值通过自定义事件传递给父组件，父组件可以对整个表单数据进行验证、提交等操作。
树形结构操作：在树形结构组件中，子节点（子组件）可能会有一些操作（如展开、折叠、选中）。子组件将这些操作相关的数据（如节点ID、操作类型等）传递给父组件，父组件根据这些数据来更新整个树形结构的状态，比如重新计算展开节点的数量，或者根据选中节点更新其他关联组件。
模态框交互：当模态框（子组件）中有用户输入（如新建用户的信息），点击确认按钮后，模态框将用户输入的数据传递给父组件，父组件可以进行数据保存到数据库等后续操作。

星途面试题库

面试题：Qwik中如何处理子组件向父组件的反向数据传递

知识考点

面试题答案

1. 事件机制

2. 代码实现思路

3. 实际项目中的应用场景