面试题：Qwik组件Props中等难度题

Question

在Qwik组件中，如何传递一个对象类型的Prop，并在组件内部安全地使用其属性？请举例说明。

Answer 1

在Qwik组件中传递对象类型的Prop并安全使用其属性，可以按以下步骤进行：

1. 传递对象Prop：在父组件中，将对象作为Prop传递给子组件。
2. 在子组件中接收并安全使用：在子组件中，使用类型断言或类型定义来确保对象结构正确，然后安全地访问其属性。

示例代码如下：

父组件

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

const ParentComponent = component$(() => {
  const myObject = useSignal({
    name: 'John',
    age: 30
  });

  return (
    <div>
      <ChildComponent myObject={myObject.value} />
    </div>
  );
});

export default ParentComponent;

子组件

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

interface MyObjectType {
  name: string;
  age: number;
}

const ChildComponent = component$(({ myObject }: { myObject: MyObjectType }) => {
  return (
    <div>
      <p>Name: {myObject.name}</p>
      <p>Age: {myObject.age}</p>
    </div>
  );
});

export default ChildComponent;

在上述示例中：

1. 父组件ParentComponent：创建一个信号myObject，并将其值作为myObject Prop传递给ChildComponent。
2. 子组件ChildComponent：定义了MyObjectType接口来明确myObject的结构，通过解构接收myObject Prop，并安全地访问其name和age属性。

这样就实现了在Qwik组件中传递对象类型的Prop并安全使用其属性。