Vue中实现组件通信的方式

在VUE中实现通信有很多种的方式，每一种都有其对应的使用情况。
首先我们看看有哪些方式：

• props
• emit
• v-model
• refs
• provide/inject
• eventBus
• uex/pinia(状态管理工具)

常见的是上面的这几种，少见的其实还可以算上插槽slot,混入，路由携带参数，localStorage,$parent/$children等

1. props
   常常使用在父组件传递給子组件通信的过程中，首先在子组件中使用props,来接收对应的属性，而在父组件中使
   用子组件的地方，添加上面定义的属性。（就是通过:props=’xxx’来传递变量，子组件有一个和data并列的props属性，用来接收变量）

2. emit
   这个就和上面的相反，是使用在子组件给父组件传递值的中。子组件中声明对应的事件，当子组件触发事件，就会
   通过this.$emit(‘事件’，数据)传递到，而在父组件中使用子组件的地方，添加上面定义的事件，这个可以获取子组件传来的值。（emit相反，用于子组件向父组件传递消息，子组件：this.$emit(‘updateMessage’, this.localMessage); 父组件：<ChildComponentA @updateMessage=”handleMessageUpdate” />，父组件编写handleMessageUpdate函数接收子组件传来的值

   1 2 3 4 5 6

   methods: { // 处理从子组件发来的事件 handleMessageUpdate(newMessage) { this.xxx = newMessage; } }

）

3. provide/inject
   这对组合往往使用在层级比较深的时候，比如A组件下可能还有B组件，B组件下有C组件..E组件而使用这对
   API,就能无论层级有多深都能获取到

4. eventBus
   也就是事件总线，简单粗暴，可以到处飞。可以不管你是不是父子关系，通过新建一个Vue事件bus对象，然后通过
   bus.emit触发事件，bus.on监听触发的事件。但不建议乱用，不好维护。

5. vuex
   对于大型的项目来说往往是很必要的，尤其单页面应用，很多页面嵌套页面，关系很多。而使用VUEX就能便捷的
   统一管理。

总结
常见的组件通信方式有通过props/emit/provide和inject/eventBus/vuex等，一般根据不同的场景来决定使用的方式。比如父子组件通信使用props,反过来使用emit。而当层级很多的时候使用provide,全局的状态管理使用vuex等。