vue各组件通讯方案
父子组件通讯
1、 父传子：props 子传父：$emit
props规范:
list: {type: Array, default() {return []}, required: true/false}
2、$parent 与 $children（只能用于通讯，不能用于传值）
子组件使用this.$parent访问父实例，返回一个对象（可以直接访问所有方法和data） 父组件使用this.$children访问子实例，需要注意的是它返回一个数组
3、ref获取子组件实例
ref：如果在DOM 上使用，指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据。 父组件可通过this.$refs.xxx获取子组件实例
跨组件通讯
*1、自定义事件-eventBus
通过创建一个空的Vue实例，再在各个组件中注册与触发相对应的方法，可以做到传值与通讯。 详细查看 components/eventBus.js、Home.vue、Event.vue案例，主要应用的方法有Bus.$on()、Bus.$emit()、Bus.$off()
*2、provide/inject（常用于UI框架开发）
在父组件使用provide提供数据，无论多深的子组件都可以通过inject拿到。 例如： 父组件provide: {name: "chaos"} 子组件: inject: ['name']
*3、$attrs与$listeners(父子嵌套组件通讯)
【推荐文章：https://juejin.im/post/5c7621766fb9a049f362c3c8#comment】
结论：$attrs 与 $listeners 是两个「对象」，$attrs 里存放的是父组件中绑定的非Props属性，$listeners里存放的是父组件中v-on绑定的所有事件。
注解1：非Props属性就是在父组件在使用子组件的时候使用v-bind绑定了，但是在子组件的props中没有声明，这些属性就会出现在this.$attrs这个对象中(不包括style与css)
注解2：父组件在使用子组件的时候使用v-on(@)绑定的事件，在子组件中的this.$linteners这个对象都会存在，而且可以直接传参与调用，这就做到了父子组件传参
注解3：嵌套组件则在父组件中的子组件标签上使用v-bind="$attrs"与v-on=“$listeners”传递到后代组件。