Vue组件通讯

面试题，比较简单的是

props，$emit
Vuex（Vuex用来传值被认为与其“数据共享”的定位不太一样）
$refs

还有几种平时不太用的

$parent $children，直接this.$parent就行，得到的是vm
$attrs $listeners Vue2.4提供

一般配合属性inheritAttrs一起使用，默认值为true。
当父组件给子组件添加属性，但子组件没有用props接收时，inheritAttrs指定该属性是否会被渲染到el.attributes上，true代表会。好像跟$attrs也没关系，但是一般用$attrs的时候都会指定inheritAttrs为false。

$attrs $listeners适用于三级传值，更多也行，但更多级用Vuex会比较方便。
以ABC为父子孙三级结构。
A传B两条属性——attr1、attr2，两个响应事件——ev1，ev2
B中用props接收attr1，则B的$attrs为attr2，也就是说$attrs的意思就是父传值除掉props的那部分，当需要进行跨级通讯时，就可以不设置中间组件的props，属性就会一直传递下去。
比起$attrs的中间组件props会“消耗”属性，$listener则不会有中间损失的情况。中间组件即便$emit触发了事件，$listener也会将事件传下去，且层级越深的组件越先触发事件（BC都调用ev1，C的ev1先响应）。
B传C为<C v-bind="$attrs" v-on="$listener"></C>

provide inject 不推荐业务使用，但组件库很常用

父组件提供变量，与data同级，写法为：

{
  provide: {
    foo: 'bar'
  }
}

子组件通过inject: ['foo']接收，然后通过this.foo就可以访问到；
写法类似props，但是inject不受限于父子，只要属于嵌套，子组件就能通过inject调用祖组件provide的值。

EventBus 事件总线

有两种写法，一种是小范围通讯，可以建立局部总线；或者挂到原型上，建立全局总线。
局部总线需要新建一个js文件，初始化为export const EventBus = new Vue()，使用类似于socket.io，发送方用EventBus.$emit('event', data)，接收方用Event.$on('event', fn)。双方均需引入该js。
全局总线则是在main.js中初始化：

var EventBus = new Vue();

Object.defineProperties(Vue.prototype, {
  $bus: {
    get: function () {
      return EventBus
    }
  }
})

使用也类似，只不过不需要引入额外的js，用this.$bus代替EventBus即可。
事件总线通常用来作为兄弟组件的通讯手段。

Vue组件通讯

推荐阅读更多精彩内容