Vue组件通信有哪些方式？

参考：vue通信、传值的多种方式（详细）
Vue组件通信中eventBus的使用

vue通信及组件之间传值

1、通过路由带参数进行传值

1. 两个组件 A和B,A组件通过query把orderId传递给B组件：this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B
2. 在B组件中获取A组件传递过来的参数：this.$route.query.orderId

route对象表示当前的路由信息，router对象是全局路由的实例。参考：vue中router与router与route区别
==注意：==关于页面刷新后，query参数会消失如何处理？
参考：router路由跳转使用query传递参数刷新后数据无法获取

• 通过JSON.stringify（） 把对象变成字符串，然后再传递
• 通过web存储：localstorage sessionstorage
• 在vue中设置全局变量, global.vue 以一个特定模块来组织管理这些全局量，需要引用的地方导入该模块

2、通过设置 Session Storage缓存的形式进行传递

1. 两个组件A和B，在A组件中设置缓存orderData：const orderData = { 'orderId': 123, 'price': 88 }； sessionStorage.setItem('缓存名称', JSON.stringify(orderData))
2. B组件就可以获取在A中设置的缓存了：const dataB = JSON.parse(sessionStorage.getItem('缓存名称'))

3、父子组件之间的传值

（1）父传子props

1. 定义父组件
2. 定义子组件，子组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型，如果不符合会报错

注意：父子组件传值，数据都是异步请求，有可能数据渲染时报错。
原因：异步请求时，数据还没有获取到但是此时已经渲染节点了
**解决：**可以在 父组件需要传递数据的节点加上 v-if = false，异步请求获取数据后，v-if = true

（2）子组件往父组件传值，通过emit事件

4、不同组件传值，通过eventBus

实现途径：在要相互通信的兄弟组件之中，都引入一个新的vue实例，然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。
举例：click组件和show组件为兄弟组件，实现click组件中触发点击事件后，由show组件将点击的是哪个dom元素console出来

1. 首先，给click组件添加点击事件，定义方法：doClick()
2. 新建js文件，创建eventBus，在click和show组件中import
3. 在doClick()中，触发一个事件
4. 在show组件中的created()钩子中调用bus监听这个事件，并接收参数

5、利用vuex进行传值

vuex主要做数据交互，维护公共状态或数据。