vue3子组件和子组件共享方法

Vue3 中子组件间共享方法的方式
在Vue 3中，实现子组件之间的方法共享可以采用多种策略。一种常见且有效的方法是通过事件总线(event bus)，利用第三方库如mitt来简化全局事件管理[^1]。
另一种方式是在共同的父级组件内定义所需的方法，并将其暴露给各个子组件。具体来说，在父组件中使用provide选项提供方法，而子组件则可通过inject获取并调用这些方法[^3]。
使用 Provide/Inject 进行方法共享
下面是一个简单的例子展示如何借助provide/inject机制让两个兄弟组件能够访问同一个公共函数：
// ParentComponent.vue
<template>
<div class="parent">
<ChildA />
<ChildB />
</div>
</template>

<script setup>
import ChildA from './ChildA.vue';
import ChildB from './ChildB.vue';

function sharedMethod() {
console.log('This method is called by either child A or B');
}

provide('sharedAction', sharedMethod); // 提供名为'sharedAction'的服务
</script>
登录后复制
对于接收方即子组件而言，则只需要简单地注入这个服务即可：
<!-- ChildA.vue 和 ChildB.vue -->
<script setup>
import { inject } from 'vue';

const action = inject('sharedAction');

action(); // 调用了来自父组件提供的sharedMethod()
</script>
登录后复制
这种方法不仅保持了父子关系清晰明了，同时也使得跨多个层次结构下的子孙节点也能方便地获得相同的功能支持[^4]。
此外还可以考虑引入Vuex作为状态管理模式的一部分，当涉及到更复杂的业务逻辑以及多处都需要同步操作的状态变更时尤为适用。