在 Vue 中，父子组件可以通过以下方式相互调用方法：父组件调用子组件方法：通过 props、refs。子组件调用父组件方法：通过 emit、provide/inject。
Vue 中父子组件如何相互调用方法
在 Vue 中，父子组件可以通过以下方法相互调用方法：
父组件调用子组件方法
- 通过 props: 父组件向子组件传递一个 prop，该 prop 是一个函数，子组件可以调用它来触发父组件的方法。
-
通过 refs: 父组件通过
ref获取子组件的实例，然后可以直接调用子组件的方法。
子组件调用父组件方法
立即学习“前端免费学习笔记（深入）”；
-
通过 emit: 子组件使用
$emit方法触发一个自定义事件，父组件使用v-on绑定该事件并执行相应的函数。 -
通过 provide/inject: 父组件通过
provide提供一个函数，子组件通过inject注入该函数，然后可以直接调用该函数。
具体步骤
父组件调用子组件方法
使用 props：
<code class="javascript"><!-- 父组件 -->
<template>
<ChildComponent :my-method="myMethod" />
</template>
<script>
export default {
methods: {
myMethod() {
console.log("父组件的方法被调用了");
},
},
};
</script>
<!-- 子组件 -->
<template>
<button @click="myMethod">触发父组件的方法</button>
</template>
<script>
export default {
props: ['myMethod'],
};
</script></code>使用 refs：
<code class="javascript"><!-- 父组件 -->
<template>
<ChildComponent ref="child" />
</template>
<script>
export default {
mounted() {
this.$refs.child.myMethod(); // 调用子组件的方法
},
};
</script>
<!-- 子组件 -->
<template>
<button>触发父组件的方法</button>
</template>
<script>
export default {
methods: {
myMethod() {
console.log("父组件的方法被调用了");
},
},
};
</script></code>子组件调用父组件方法
立即学习“前端免费学习笔记（深入）”；
使用 emit：
<code class="javascript"><!-- 子组件 -->
<template>
<button @click="triggerEvent">触发父组件的事件</button>
</template>
<script>
export default {
methods: {
triggerEvent() {
this.$emit('my-event'); // 触发父组件的事件
},
},
};
</script>
<!-- 父组件 -->
<template>
<ChildComponent @my-event="myMethod" />
</template>
<script>
export default {
methods: {
myMethod() {
console.log("子组件触发了父组件的事件");
},
},
};
</script></code>使用 provide/inject：
<code class="javascript"><!-- 父组件 -->
<template>
<ChildComponent />
</template>
<script>
export default {
provide() {
return {
myMethod: () => {
console.log("父组件的方法被调用了");
},
};
},
};
</script>
<!-- 子组件 -->
<template>
<button @click="myMethod">触发父组件的方法</button>
</template>
<script>
export default {
inject: ['myMethod'],
};
</script></code> 
