代码实例vue子向父传对象

你可以在子组件中使用$emit方法将一个对象作为参数传递给父组件。具体步骤如下：

1.在子组件中定义一个对象myObj，给它赋初值

2.使用$emit方法向父组件传递这个对象，同时指定一个事件名称

3.在父组件中监听这个事件，在回调函数中获取到传递过来的对象

示例代码如下：

子组件：

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

<script>
export default {
  data() {
    return {
      myObj: { name: "张三", age: 20, gender: "男" },
    };
  },
  methods: {
    sendObj() {
      this.$emit("obj", this.myObj);
    },
  },
};
</script>

父组件：

<template>
  <div>
    <p>接收到的对象：{{ receivedObj }}</p>
    <child @obj="handleObj"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  components: {
    Child,
  },
  data() {
    return {
      receivedObj: null,
    };
  },
  methods: {
    handleObj(obj) {
      this.receivedObj = obj;
    },
  },
};
</script>