总结Vue父子组件的7种通信方式

前言：：：

父子组件要始终保持单向数据流动
否则随着业务增长，代码会变得难以维护与调试，因为数据变化的触发点很难找到
解决方案：
子组件通过this.$emit()事件通知父组件来做处理（sync关键字是帮助这种情况而实现的 语法糖）

最近工作不太顺利，也非常忙碌。难得靠近春节假期稍微消停了一会，赶紧总结一些在项目开发过过程中经常遇到的点，把一些解决方案罗列一下。

父子组件的通信

1、props传参

<child :name="name">

2、this.$emit通知

//父.vue
<child @update="update"></child>
// 子.vue
this.$emit('update', params);

3、this.$root/this.$parent获取父级实例

//但是这种方法会使得数据的流动变得混乱，在小项目中会方便，但大项目建议用vuex。
//为了以后着想，还是用vuex
//不要使用this.$parent.$parent...的方式去找，接手你代码的人会疯掉（可以考虑依赖注入）
this.$root.name = 'test';
this.$parent.age = 12;

4、this.$refs.child

// 这种方式平常代码比较常见，他确实很便利我们去操作子组件。但一般最好都是尽量要避免使用，
// 应该说作为最后一个救命锦囊
<child ref="childRef"></child>
this.$refs.childRef.update();

使用ref有几个注意的点

• this.$refs.child,当ref命名相同时，返回的是数组
• this.$refs并不是响应式的，在mounted()生命周期开始生效

5、依赖注入

// parent.vue
<div>
  <inner>
	<child></child>
  </inner>
</div>
// provide暴露出去的属性，能够在parent.vue的所有子组件中通过inject注入
prodive: function() {
  return{
	getParentName: this.getParentName;
  }
}
getParentName() {
  return 'parent';
}
// child.vue
inject: ['getParentName']

善于利用依赖注入，能够让数据流动更加清晰，代码也更加简洁

依赖注入的缺点

• 非响应式
• 增加了子组件与父组件的耦合度

所以如果你想要一个能够响应式的效果，还是应该考虑使用vuex

5、$on $once $off

消息订阅机制，$emit也一样。

使用的时候要注意vue组件的生命周期，重复触发的情况要在$on之前先$off掉

6、eventBus

以前做android的时候也有这样的广播机制。使用的场景也是非常多，最好把这类型的消息事件名称用个文件管理起来。

// 类似这样，让消息透明可见。
const EVENT_BUS = {
  'WHEN_GET_MSG': 0,
  'WHEN_GET_PHONE': 1,
}

7、localStorage&sessionStorage

// parent.vue
sessionStorage.setItem('name', '小明');
// child.vue
sessionStorage.getItem('name');

不过要注意生命周期，不要出现getItem时还没完成setItem

上面的方法也能部分使用与页面之间的传参。
有补充的欢迎评论留下