【Vue】组件通信（任意通信）

微信订阅号：Rabbit_svip

本节所需的基础知识：

【Vue】组件通信（父传子 props）

【Vue】组件通信（子传父 $emit）

---

任意组件相互通信或者说兄弟（平级）组件相互通信有2个解决方案。

【方案 1】通过父组件进行通信 （不推荐）
思路如下图所示

微信订阅号：Rabbit_svip
这种方法不推荐使用
因为如果组件的关系结构更复杂的话，用这种方式来传参将会变得十分麻烦。所以这里不会讲解这种做法（如果懂组件的父子通信的话，完全可以根据这个思路写出这种通信方式。）。

---

【方法 2】总线通信（五星推荐）

微信订阅号：Rabbit_svip

1、首先在公共区域建立一条总线，用来接收所有组件传过来的参数。
2、把参数传给其他有需要的组件。

这种方法可以避免【方法 1】因为组件层级关系复杂而导致传参麻烦的问题。

具体做法如下所示：

<!-- HTML代码 -->

<div id="app">
  <lecturer></lecturer>
  <audience></audience>
</div>

/* javascript代码 */

// 设置总线，一个外部的调度器var Event = new Vue();// 新建一个组件（产生数据的组件）Vue.component('lecturer', {  // 设置组件模板
  template: `
    <div>
      演讲者：<input @keyup="recite" v-model="poem">    </div>`,
  data: function () {
    return {
      poem: ''
    }
  },
  methods: {
    recite: function() {
      // 通过 $emit 定义一个名字，把值保存到这个空间里 。
      Event.$emit('poem-details', this.poem);
    }
  }
})

// 新建一个组件（接收数据的组件）
Vue.component('audience', {
  template: `    <div>
      观众听到：{{lecturer_said}}    </div>`,
  data: function() {
    return {
      lecturer_said: ''
    }
  },
  // mounted是一个钩子函数，在该组件挂载时执行
  mounted: function() {
    var that = this;

    // 通过 $on 进行监听，poem-details 是被监听的对象。
    Event.$on('poem-details', function(data) {
      that.lecturer_said = data
    })
  }
})

new Vue({
  el: '#app'
})

1、在所有组件最上面，设置一条总线，也可以说是一个外部的调度器。
var Event = new Vue();

2、在 lecturer 组件中，定义一个事件，通过该事件触发Event.emit( ‘参数 1’， ‘参数2’ );

参数1：定义一个名字
参数2：需要传过来的值（可以是一个数组或对象）

3、在 audience 组件中，通过钩子函数（mounted）在组件挂载时调用 Event.$on 监听 lecturer 组件传过来的东西。然后通过一个函数修改 audience 的数据。