vue3 props传对象给子组件

在Vue 3中，当你想要通过props从父组件向子组件传递一个对象时，可以直接将对象作为prop传递。这里是一个简单的例子：

// 父组件（ParentComponent.vue）
<template>
  <ChildComponent :dataObject="parentData" />
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentData: {
        key1: 'value1',
        key2: 'value2',
      },
    };
  },
};
</script>

在上面的代码中，`parentData`是一个对象，包含了两个键值对。然后你在父组件的模板中通过`:dataObject`绑定它到`ChildComponent`的`dataObject` prop上。

接下来在子组件（ChildComponent.vue）中接收并处理这个对象：

// 子组件（ChildComponent.vue）
<template>
  <div>
    <p>Key 1: {{ dataObject.key1 }}</p>
    <p>Key 2: {{ dataObject.key2 }}</p>
  </div>
</template>

<script>
export default {
  props: {
    dataObject: Object,  // 声明接受的对象prop
  },
  mounted() {
    console.log('子组件已接收到的prop:', this.dataObject);
  },
};
</script>

在子组件中，你可以直接通过`this.dataObject`访问和操作接收到的对象。