2024年4月8日发(作者：)

vue 子孙组件调用父组件方法

摘要：

子孙组件调用父组件方法的原理

2.如何在 Vue 子孙组件中调用父组件方法

3.示例代码及解析

正文：

在 Vue 项目中，子孙组件调用父组件方法是一种常见的场景。下面我们

将介绍如何在 Vue 子孙组件中调用父组件方法，以及相关原理。

## 子孙组件调用父组件方法的原理

在 Vue 中，父子组件之间的通信主要是通过事件和技术实现的。当子孙

组件需要调用父组件方法时，它会把该方法注册为一个自定义事件，然后触发

这个事件，通知父组件执行该方法。

## 2.如何在 Vue 子孙组件中调用父组件方法

要在 Vue 子孙组件中调用父组件方法，可以遵循以下步骤：

1.在子孙组件中，注册一个自定义事件，该事件处理器即为要调用的父组

件方法。

```javascript

// 子孙组件

export default {

data() {

return {

message: "Hello from child component!"

};

},

methods: {

handleMessage() {

(e);

},

// 注册一个自定义事件，通知父组件调用 handleMessage 方法

emitMessage() {

this.$emit("child-message", "Hello from child component!");

}

}

};

```

2.在父组件中，监听子孙组件触发的自定义事件，并在事件处理器中调用

相应的方法。

```html