vue2子组件调用父组件方法
时间: 2023-11-03 22:18:01 浏览: 48
在 Vue2 中,子组件可以通过 `$emit` 方法来调用父组件的方法。下面是一个简单的示例:
在父组件中,定义一个方法并传递给子组件:
```html
<template>
<div>
<child-component @childMethod="parentMethod"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
parentMethod() {
console.log('Parent method called from child component');
}
}
};
</script>
```
在子组件中,使用 `$emit` 方法触发父组件的方法:
```html
<template>
<button @click="callParentMethod">Call Parent Method</button>
</template>
<script>
export default {
methods: {
callParentMethod() {
this.$emit('childMethod');
}
}
};
</script>
```
当子组件的按钮被点击时,`callParentMethod` 方法会触发 `childMethod` 事件,并调用父组件中的 `parentMethod` 方法。