vue3 父组件向子组件传递对象

在 Vue 3 中，可以通过 props 将父组件中的对象传递给子组件。

1. 在父组件中定义一个对象：

<template>
  <div>
    <child-component :myObject="parentObject"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentObject: {
        name: "John",
        age: 30
      }
    }
  }
}
</script>

2. 在子组件中声明 props：

<template>
  <div>
    <p>Name: {{ myObject.name }}</p>
    <p>Age: {{ myObject.age }}</p>
  </div>
</template>

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

3. 在子组件中使用父组件传递的对象。

通过这种方式，父组件中的对象可以在子组件中进行使用。注意，在子组件中声明 props 时需要指定类型和是否必需。