vue子组件调用父组件方法
时间: 2023-06-21 18:04:55 浏览: 48
在 Vue 中,子组件可以通过 `$emit` 方法触发父组件中的自定义事件,并且可以传递参数。父组件可以在模板中绑定自定义事件并在相应的方法中处理子组件传递过来的参数。
以下是一个示例:
```html
<!-- 父组件模板 -->
<template>
<div>
<child-component @custom-event="handleCustomEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
handleCustomEvent(data) {
console.log(`Received data from child component: ${data}`)
// 处理子组件传递过来的参数
}
}
}
</script>
```
```html
<!-- 子组件模板 -->
<template>
<div>
<button @click="handleClick">Click me!</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
const data = 'Hello, parent!'
this.$emit('custom-event', data)
// 触发自定义事件并传递参数给父组件
}
}
}
</script>
```
在上面的示例中,子组件中的 `handleClick` 方法通过 `$emit` 触发了父组件中的 `handleCustomEvent` 方法,并将参数 `'Hello, parent!'` 传递给了父组件。父组件中的 `handleCustomEvent` 方法接收到了子组件传递过来的参数,并在控制台中输出了一条消息。