vue3 父子组件传值对象 示例

可以使用props实现父子组件之间传递对象的值。以下是一个简单的示例：

父组件：

<template>
  <div>
    <ChildComponent :person="personObj" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      personObj: {
        name: '张三',
        age: 20,
        gender: '男'
      }
    }
  }
}
</script>

子组件：

<template>
  <div>
    <p>{{ person.name }}</p>
    <p>{{ person.age }}</p>
    <p>{{ person.gender }}</p>
  </div>
</template>

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

在这个示例中，父组件通过props属性将一个名为personObj的对象传递给了子组件ChildComponent。子组件中的props属性person接收这个对象并在模板中使用其中的属性。这样就实现了父子组件之间传递对象的值。