子组件给父组件传对象值并触发父组件方法,父组件如何接收
时间: 2023-12-27 16:25:02 浏览: 62
父组件可以通过自定义一个方法,并将该方法传递给子组件,子组件可以通过`this.$emit`来触发父组件中的方法,并将对象值作为参数传递给父组件。
以下是一个示例代码:
父组件:
```javascript
<template>
<div>
<child-component @child-event="handleChildEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleChildEvent(obj) {
// 在这里接收子组件传递的对象值,并进行相应的处理
console.log(obj);
}
}
}
</script>
```
子组件:
```javascript
<template>
<div>
<button @click="triggerEvent">触发事件</button>
</div>
</template>
<script>
export default {
methods: {
triggerEvent() {
const obj = { name: 'John', age: 25 };
this.$emit('child-event', obj);
}
}
}
</script>
```
在上述示例中,子组件通过点击按钮触发`triggerEvent`方法,并通过`this.$emit`将对象值`obj`传递给父组件。父组件中的`handleChildEvent`方法接收到子组件传递的对象值,并进行相应的处理。
阅读全文