Vue2.x的组件通信

父->子

方式

父组件通过属性的方式给子组件传值，子组件通过props来接受父组件的值。

注意

1. 如果传递的是个对象的话，只改变下面的某个属性子组件中是不会响应式更新的，如果子组件需要在数据变化时响应式更新，可以用watch深拷贝deep:true监听到变化；

2. 如果你传进来的是个对象，同时你又需要在子组件中操作传进来的这个数据，那么在父组件中的这个数据也会改变，因为传递的只是个引用，可通过将对象做深拷贝创建一个副本解决这个问题。

可以但不建议的操作

1. 直接用ref调用子组件函数直接把数据以参数的形式传给子组件；

2. $children是一个数组，是直接儿子的集合，不保证顺序，也不是响应式。

子->父

方式

子组件通过$emit的操作触发父组件的自定义事件，父组件中监听这个事件并在回调中写相关逻辑。

可以但不建议的操作

1. 可以在子组件中定义一种专供父组件调用的函数，当父组件想要获取子组件数据就直接主动调用ref执行这个函数获取数据；

2. $parent是当前组件树的根 Vue 实例，如果当前实例没有父实例，此实例将会是其自己。

兄->弟

方式

1. 路由URL参数：把需要跨页面传递的数据放到url后面，跳转到另外页面时获取url字符串获取想要的参数即可。局限性：只适合传递比较小的数据。

2. EventBus：在组件之外定义一个event-bus.js作为组件间通信的桥梁，也可称之为事件总线。EventBus实现了发布订阅模式，往事件总线里订阅事件用的是on，发布事件用的是emit。

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

祖先->后代

方式

1. provide/inject，允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

2. $attrs：在子组件中添加v-bind=’$​attrs’，就把父组件传来的子组件没props接收的数据全部传到孙组件，子组件和孙组件都可以用this.$attrs获取。

注意

provide 和 inject 绑定并不是可响应的。如果数据类型是对象Object，其对象的属性还是可响应的，因为对象格式数据存储的是指针而不是数据，操作的是同一个对象。

通用

方式

1.Vuex集中状态管理：类似与一个共享数据仓库，所有的组件都可以去操作；

2.localStorage，sessionStorage，cooikes之类的存在本地也能做到组件间的通信。