Vue：兄弟组件间如何通信？

兄弟组件间如何通信？

非父子组件间无法直接通信，通过单独的事件中心管理组件间的通信。

事件中心：可以单独创建一个Vue的实例对象，来进行事件的监听，触发和销毁。

监听

Hub.$on('事件名', fn)

触发

Hub.$emit('事件名', args)

销毁

Hub.$off('事件名')

一、创建事件中心

在外部创建一个js文件Hub.js

import Vue from 'vue'

var Hub = new Vue()
export default Hub

二、借助父组件来引用两个兄弟组件

父组件

<template>
  <div>
      <p>父组件C</p>
      <button @click="handle">销毁所有事件</button>
      <A></A>
      <B></B>
  </div>
</template>

<script>
import A from './A.vue'
import B from './B.vue'
import Hub from '../assets/Hub'

export default {
    data () {
        return {
        }
    },
    methods: {
	    // 销毁事件
        handle() {
            Hub.$off('a-event')
            Hub.$off('b-event')
        }
    },
    components: {
        A, 
        B
    }
}
</script>

三、在兄弟组件中利用事件中心监听事件

子组件导入事件中心

import Hub from '../assets/Hub'

利用事件中心监听事件

    mounted () {
        // 通过事件中心监听事件, 利用立即函数，让触发事件时this指向调用的
        Hub.$on('a-event', (val) => {
            this.num += val
        })
    }

四、触发兄弟组件事件实现通信

<div>
     <button @click="handle">每次增加B组件数值2</button>
</div>

A组件通过事件中心触发兄弟组件监听的事件

    methods: {
        handle() {
            // 通过事件中心触发兄弟组件监听的事件
            Hub.$emit('b-event', 2)
        }
    },

B组件监听的事件，B组件val为接收到的兄弟组件传过来的值：2

    mounted () {
        // 通过事件中心监听事件, 利用立即函数，让触发事件时this指向调用的
        Hub.$on('b-event', (val) => {
            this.num += val
        })
    }

完整的A、B兄弟组件

<template>
  <div>
        <div>A: {{num}}</div>
        <div>
            <button @click="handle">点击增加B组件数值2</button>
        </div>
  </div>
</template>

<script>
import Hub from '../assets/Hub'
export default {
    data () {
        return {
            num: 0
        }
    },
    methods: {
        handle() {
            // 通过事件中心触发兄弟组件监听的事件
            Hub.$emit('b-event', 2)
        }
    },
    mounted () {
        // 通过事件中心监听事件, 利用立即函数，让触发事件时this指向调用的
        Hub.$on('a-event', (val) => {
            this.num += val
        })
    }
}
</script>

<template>
    <div>
        <div>B: {{num}}</div>
        <div>
            <button @click="handle">点击增加A组件数值1</button>
        </div>
    </div> 
</template>

<script>
import Hub from '../assets/Hub'
export default {
    data () {
        return {
            num: 0
        }
    },
    methods: {
        handle() {
            // 通过事件中心触发兄弟组件监听的事件
            Hub.$emit('a-event', 1)
        }
    },
    mounted () {
        // 通过事件中心监听事件, 利用立即函数，让触发事件时this指向调用的
        Hub.$on('b-event', (val) => {
            this.num += val
        })
    }
}
</script>

销毁事件

<button @click="handle">销毁所有事件</button>

    methods: {
        handle() {
            Hub.$off('a-event')
            Hub.$off('b-event')
        }
    },

效果

点击按钮实现兄弟组件间的通信；点击销毁则事件销毁无法通信；