面试题：Qwik中父组件向子组件传递数据有哪些常见方式

Question

在Qwik前端开发框架里，阐述父组件向子组件传递数据的常见方式，并举例说明如何在代码中实现。

Answer 1

常见方式

1. 属性（Props）传递：这是最常用的方式，父组件通过属性将数据传递给子组件。

代码示例

1. 创建子组件
   • 在Qwik项目中，假设创建一个 ChildComponent.tsx 文件。

   import { component$, useStore } from '@builder.io/qwik';
   
   const ChildComponent = component$(() => {
     const store = useStore({});
     return (
       <div>
         <p>{store.message}</p>
       </div>
     );
   });
   
   export default ChildComponent;
   

2. 父组件传递数据
   • 在父组件中，例如 ParentComponent.tsx 中引入并使用子组件，并传递数据。

   import { component$, useStore } from '@builder.io/qwik';
   import ChildComponent from './ChildComponent';
   
   const ParentComponent = component$(() => {
     const store = useStore({
       message: 'Hello from parent'
     });
     return (
       <div>
         <ChildComponent message={store.message} />
       </div>
     );
   });
   
   export default ParentComponent;
   

   • 在上述代码中，父组件 ParentComponent 通过 message 属性将 store.message 传递给了子组件 ChildComponent。子组件可以通过类似 props.message 的方式（如果使用props解构的话）来接收和使用这个数据。在Qwik中，useStore 用于创建响应式数据，组件会自动响应数据的变化。