vue中,子组件如何调用父组件方法
时间: 2023-11-03 21:19:57 浏览: 81
在 Vue 中,子组件可以通过自定义事件来调用父组件的方法。以下是一种常见的方法:
1. 在父组件中定义一个方法,并将其传递给子组件:
```html
<template>
<div>
<child-component @child-event="parentMethod"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
parentMethod() {
// 父组件的方法逻辑
}
}
}
</script>
```
2. 在子组件中,触发自定义事件来调用父组件的方法:
```html
<template>
<button @click="triggerEvent">调用父组件方法</button>
</template>
<script>
export default {
methods: {
triggerEvent() {
this.$emit('child-event');
}
}
}
</script>
```
在上面的例子中,子组件通过 `$emit` 方法触发了名为 `child-event` 的自定义事件,父组件在子组件的标签上使用 `@child-event` 监听到这个事件,并调用了 `parentMethod` 方法。
这样,当点击子组件中的按钮时,就会触发父组件中的方法。你可以根据实际需求传递参数给父组件方法或使用其他技巧来实现更复杂的操作。
阅读全文