面试题：Qwik中如何在父子组件间传递Props并在子组件中正确使用

Question

请描述在Qwik中，如何将数据作为Props从父组件传递到子组件，并在子组件中获取和使用这些Props。假设父组件有一个字符串类型的变量 'message'，需要传递给子组件并在子组件中显示出来，写出关键代码片段。

Answer 1

父组件代码

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

const ParentComponent = component$(() => {
    const message = 'Hello from parent';
    return (
        <div>
            <ChildComponent message={message} />
        </div>
    );
});

export default ParentComponent;

子组件代码

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

const ChildComponent = component$(() => {
    const props = useProps();
    return (
        <div>
            {props.message}
        </div>
    );
});

export default ChildComponent;