vue项目,子组件向父组件传个对象
时间: 2023-07-21 22:17:37 浏览: 48
在子组件中使用 `$emit` 方法向父组件传递一个对象,具体步骤如下:
1. 在子组件中定义一个对象,例如:
```javascript
data() {
return {
obj: {
name: '张三',
age: 20
}
}
}
```
2. 在子组件中使用 `$emit` 方法触发一个自定义事件,并将对象作为参数传递,例如:
```javascript
this.$emit('my-event', this.obj);
```
3. 在父组件中监听子组件触发的自定义事件,并且将子组件传递的对象赋值给父组件的数据,例如:
```javascript
<template>
<div>
<child-component @my-event="handleEvent"></child-component>
<p>姓名:{{ person.name }}, 年龄:{{ person.age }}</p>
</div>
</template>
<script>
export default {
data() {
return {
person: {}
}
},
methods: {
handleEvent(obj) {
this.person = obj;
}
}
}
</script>
```
这样,当子组件触发 `my-event` 事件时,父组件就会响应 `handleEvent` 方法,并将子组件传递的对象赋值给 `person` 数据,从而实现了子组件向父组件传递对象的功能。