vue3子组件接收父组件传的复杂数据

在Vue3中，子组件可以接收父组件传递的复杂数据。通常情况下，我们可以将数据作为props传递给子组件。

下面是一个示例代码：

<template>
  <div>
    <child-component :data="complexData"></child-component>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      complexData: {
        name: "John",
        age: 30,
        address: {
          city: "New York",
          state: "NY",
        },
        hobbies: ["reading", "music", "travel"],
      },
    };
  },
};
</script>

在父组件中，我们定义了一个名为complexData的复杂数据对象，并通过props将其传递给子组件。

在子组件中，我们需要通过props定义接收数据的属性。例如，在ChildComponent.vue组件中，我们可以这样定义props：

<template>
  <div>
    <h2>{{ data.name }}</h2>
    <p>Age: {{ data.age }}</p>
    <p>Address: {{ data.address.city }}, {{ data.address.state }}</p>
    <h3>Hobbies:</h3>
    <ul>
      <li v-for="hobby in data.hobbies" :key="hobby">{{ hobby }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
};
</script>

在子组件中，我们使用了props接收传递进来的复杂数据对象，并在模板中使用它的属性和方法。

需要注意的是，我们需要在子组件中明确指定props接收的数据类型，这里是Object类型。同时，required选项可以指定该数据是否是必须的。