非你网

在常规情况下，去定义组件的时候，只需要用到父子组件通讯即可。这样比较好实现。有时候，也会用到任意组件间的通讯，这个时候自定义组件的方式就有用了。不弄那么多，只弄一个。

先看常见父子通讯

# 使用组件的地方
<sky @changeColor="changeColor" />

methods: {
    changeColor(value) {

    }
}
# 组件内部，仅此而已。子组件中的数据，就可以被父组件收到了
this.$emit('changeColor', 'blue')

全局任意组件通讯

1. 我们先定义一个中间的 bus

eventBus.js

import Vue from 'vue'

export default new Vue()

1. 通常事件，事件是有一个地方发送，一个地方接受。我们再定义一个事件接受的地方。不过，要记得释放哟。可以在 mounted 的时候添加，beforeDestroy 的时候释放掉

xxx1.vue

import eventBus from '../utils/eventBus.js'

export default {
  data() {
    return {
      name: 'hello world'
    }
  },
  watch: {

  },
  mounted() {
    eventBus.$on('message', this.message)
  },
  beforeDestroy() {
    eventBus.$off('message', this.message)
  },
  methods: {
    message(value) {
        console.log('message = ', value)
    }
  }

1. 我们再定义一个发送事件的地方

xxx2.vue

import eventBus from '../utils/eventBus.js'

# 发送吧
eventBus.$emit('message', 'hello world')

最后啰嗦一下

兄弟组件之间，也可以用自定义事件的方式来通讯。既然是兄弟，那他们肯定有相同的父组件。以父组件为 dispatcher 来整不就可以了。

# 兄弟一收
this.$parent.$on('message', res => { console.log('res = ', res) })

# 兄弟二发
$this.$parent.$emit('message', 'hello world')