vue子组件调用父组件办法,vue3子组件调用父组件的办法

在 Vue 中，子组件能够经过 `this.$emit` 办法来触发一个事情，并在父组件中监听这个事情来调用父组件的办法。这里有一个简略的比如来阐明这个进程：

子组件

```vue 调用父组件办法

export default { methods: { callParentMethod { // 触发一个事情，并传递数据 this.$emit; } }}```

父组件

```vue

import ChildComponent from './ChildComponent.vue';

export default { components: { ChildComponent }, methods: { handleParentMethod { // 处理子组件传递过来的数据 console.log; } }}```

在这个比如中，子组件经过点击按钮触发了一个名为 `parentMethod` 的事情，并传递了一个字符串作为参数。父组件监听了这个事情，并在事情触发时调用了 `handleParentMethod` 办法，该办法接纳子组件传递过来的音讯并打印出来。

Vue子组件调用父组件办法的几种办法详解

在Vue.js结构中，组件化是构建用户界面的一种强壮办法。组件之间的通讯是组件化开发中不可或缺的一部分。本文将具体介绍Vue子组件怎么调用父组件的办法，并供给几种常见且有用的办法。

一、经过Props传递数据

1.1 基本概念

1.2 示例代码

以下是一个简略的示例，展现怎么经过Props在父组件和子组件之间传递数据：

```html