vue3中父向子组件传值，传对象

在Vue 3中，从父组件向子组件传递对象通常有两种常见的方法：

1. Props（属性）传递：这是官方推荐的方式。父组件通过props将对象作为数据向下传递给子组件。父组件需要显式地定义一个prop，并指定其类型，例如：

   // 父组件
   const ParentComponent = {
     props: {
       objData: { type: Object, default: () => ({}) } // 声明一个默认为空的对象
     },
     methods: {
       sendData() {
         this.$emit('update:objData', { key1: 'value1', key2: 'value2' }); // 触发更新prop
       }
     }
   };

   // 子组件
   <ChildComponent :objData="parentObjData" @update:objData="handleUpdate"></ChildComponent>
   data() {
     return { parentObjData: {} };
   },
   methods: {
     handleUpdate(newData) {
       this.parentObjData = newData;
     }
   }

2. 使用自定义事件：如果需要实时更新，可以利用`$emit`和`v-on`监听自定义事件，在父组件改变对象时触发事件，然后在子组件处理该事件：

   // 父组件
   this.$refs.child.updateObject({ ...this.objData }); // 直接修改子组件对象

   // 或者触发事件
   this.$emit('update-object', { ...this.objData });

   // 子组件
   methods: {
     updateObject(newObj) {
       this.obj = newObj;
     },
     updateParentObject(event) {
       this.parentObjData = event.detail; // 接收更新对象
     }
   },
   mounted() {
     this.$on('update-object', this.updateParentObject);
   },
   beforeDestroy() {
     this.$off('update-object', this.updateParentObject);
   }