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

在Vue3中，子组件向父组件传递对象的方法与传递参数类似。可以通过`$emit`方法将对象作为参数传递给父组件，然后在父组件中通过监听子组件的事件来接收传递过来的对象。

下面是一个示例代码，演示了Vue3中子组件向父组件传递对象的过程：

子组件ChildComponent.vue：

<template>
  <button @click="sendObject">传递对象给父组件</button>
</template>

<script>
export default {
  methods: {
    sendObject() {
      const obj = { name: 'John', age: 25 };
      this.$emit('sendObject', obj);
    }
  }
}
</script>

父组件中使用子组件并接收传递的对象：

<template>
  <div>
    <child-component @sendObject="handleObject"></child-component>
    <p>接收到的对象：{{ receivedObject }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedObject: null
    }
  },
  methods: {
    handleObject(obj) {
      this.receivedObject = obj;
    }
  }
}
</script>

在上述示例中，子组件通过`$emit`方法将一个对象传递给父组件，父组件通过监听子组件的`sendObject`事件来接收传递过来的对象，并将其赋值给`receivedObject`属性。最终，在父组件的模板中可以显示接收到的对象。