vue的组件通信（父子之间、非父子之间）

vue的组件通信（父子之间、非父子之间）

1、 props/$emits

（1） v-model（input的修饰符.lazy, .number, .trim），.sync(父组件:title.sync="myTitle",子组件要this.$emit('update:title', this.title + ':: after update'))语法糖，在表单控件或者组件上创建“双向绑定”。

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

（2）通过props向下传递，通过事件$emit向上传递
（3）不应该在一个子组件内部改变 prop，这样会破坏单向的数据绑定，导致数据流难以理解。如果有这样的需要，可以通过 data 属性接收或使用 computed 属性进行转换。
第二，如果 props 传递的是引用类型(对象或者数组)，在子组件中改变这个对象或数组，父组件的状态会也会做相应的更新，利用这一点就能够实现父子组件数据的“双向绑定”，虽然这样实现能够节省代码，但会牺牲数据流向的简洁性，令人难以理解，最好不要这样去做。想要实现父子组件的数据“双向绑定”，可以使用 v-model 或 .sync。

2、 $children/$parent

$parent 属性可以用来从一个子组件访问父组件的实例，$children 属性 可以获取当前实例的直接子组件。

3、 ref

（1）当父组件中需要主动获取子组件中的数据或者方法时，可以使用 $ref 来直接访问这个子组件的实例。
（2）$refs 是作为渲染结果被创建的，所以在初始渲染的时候它还不存在，此时无法无法访问。
（3）$refs 不是响应式的，只能拿到获取它的那一刻子组件实例的状态，所以要避免在模板和计算属性中使用它。

4、 provide/inject依赖注入

可以让我们在任意后代组件中访问父组件提供的数据和方法。

5、 eventBus

可以实现任意两个组件间的通信

6、 vuex

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种“可预测”的方式发生变化，更容易定位问题

7、 $attrs/$listeners

（1）当要和一个嵌套很深的组件进行通信时，如果使用 prop 和 events 就会显的十分繁琐，中间的组件只起到了一个中转站的作用
（2）$attrs 会包含父组件中没有被 prop 接收的所有属性（不包含class 和 style 属性），可以通过 v-bind="$attrs" 直接将这些属性传入内部组件。
（3）$listeners 会包含所有父组件中的 v-on 事件监听器 (不包含 .native 修饰器的) ，可以通过 v-on="$listeners" 传入内部组件。

8、 localStorage/sessionStotage

9、 通过 $root 访问根实例

（1）通过 $root，任何组件都可以获取当前组件树的根 Vue 实例，通过维护根实例上的 data，就可以实现组件间的数据共享。
（2）修改数据不可预测