vue3父子组件相互调用方法详解

在Vue 3中，父子组件之间的通信可以通过props和emit来实现。父组件可以通过props向子组件传递数据，而子组件可以通过事件emit来调用父组件的方法。

以下是一个简单的例子：

父组件 (ParentComponent.vue):

<template>
  <div>
    <ChildComponent :parentMethod="parentMethod" />
  </div>
</template>
 
<script setup>
import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const parentMethod = () => {
  console.log('This is a method from the parent component.');
};
</script>

子组件 (ChildComponent.vue):

<template>
  <div>
    <button @click="callParentMethod">Call Parent Method</button>
  </div>
</template>
 
<script setup>
import { defineComponent, inject } from 'vue';
 
const parentMethod = inject('parentMethod');
 
const callParentMethod = () => {
  if (parentMethod) {
    parentMethod();
  }
};
</script>

在这个例子中，父组件通过props将方法parentMethod传递给子组件。子组件通过inject获取这个方法，并在点击按钮时调用它。这样，子组件就可以间接调用父组件的方法。