2. 隔代组件通信
2.1 provide/inject
provide / inject 为依赖注入，该方法用于父子组件、隔代组件之间的通信，即在层数很深的情况下，可以使用这种方法来进行传值。就不用一层一层的传递了。
provide / inject是Vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式和data一样。
provide 用来发送数据或方法
inject 用来接收数据或方法
vue2写法
// 父组件 export default{ provide(){ return { msg: this.msg } } }
// 后代组件 export default{ inject:["msg"] }
要注意的是 provide 和 inject 传递的数据不是响应式的，也就是说用 inject 接收来数据后，provide 里的数据改变了，后代组件中的数据不会改变。
vue3写法
// Parent.vue <script setup> import { provide } from "vue" provide("name", "小心") </script>
// Child.vue <script setup> import { inject } from "vue" const name = inject("name") console.log(name) //小心 </script>
3. 兄弟组件通信
3.1 eventBus事件总线
eventBus事件总线，本质是通过创建一个空的 Vue 实例来作为消息传递的对象，通过$on监听事件，通过$emit触发事件，适用于父子、隔代、兄弟组件通信。
vue2写法
1.创建事件中心管理组件之间的通信
// main.js import Vue from "vue" Vue.prototype.$bus = new Vue()
2.通过emit触发自定义事件
//兄弟组件A 发送数据 <template> <button @click="handlerClick">按钮</button> </template> export default{ methods:{ handlerClick(){ // 自定义事件名 sendMsg this.$bus.$emit("sendMsg", "这是要向外部发送的数据") } } }
3.通过on监听事件
//兄弟组件B 接受数据 export default{ mounted(){ // 监听事件的触发 this.$bus.$on("sendMsg", data => { console.log("这是接收到的数据：", data) }) }, beforeDestroy(){ // 取消监听 this.$bus.$off("sendMsg") } }
vue3写法
Vue3中移除了eventBus，但可以借助mitt插件来实现代替，原理还是 EventBus。
1.首先需要安装插件
npm install --save mitt
2.创建总线对象
//mitt.js import mitt from 'mitt' const mitt = mitt() export default mitt
3.通过emit方法触发自定义事件，on方法监听事件
// 组件 A <script setup> import mitt from './mitt' const handleClick = () => { mitt.emit('handleChange') } </script>
// 组件 B <script setup> import mitt from './mitt' import { onUnmounted } from 'vue' const someMethed = () => { ... } mitt.on('handleChange',someMethed) onUnmounted(()=>{ mitt.off('handleChange',someMethed) })
参考mitt官网
3.2 Vuex/Pinia
使用Vuex或Pinia状态管理器，集中式存储管理所有组件的状态，实现任意组件间的通信。
vuex核心概念：state、mutations、actions、getters、modules
pinia核心概念：state、actions、getters。没有mutation、modules。
用法可以参考：Pinia官网，Vuex官网。这里就不再具体展开。
结语
本文结合vue2和vue3写法对比，总结了vue中组件通信常用的几种方式。
父子组件：props / $emit、 ref / $parent
隔代组件：provide / inject、eventBus、Vuex / Pinia
兄弟组件：eventBus、Vuex / Pinia
写作不易，你的一赞一评，就是我前行的最大动力。如有问题，欢迎指出！
