eventBus

兄弟组件通讯

1.创建vue空实例

// 在eventBus.js文件里面创建一个vue的空实例
// eventBus.js
import Vue from 'Vue'

var bus = new Vue()

export default bus

2.A组件内触发事件

// A.vue
<template>
    <div>
        <button @click="add">add</button>
    </div>
</template>

<script>
import bus from './eventBus'
export default {
    data() {
        return {
            num: 0
        }
    },
    methods: {
        add() {
            this.num ++
            bus.$emit('busAdd', this.num)
        }
    }
}
</script>

3.B组件监听事件

// B.vue
<template>
    <div>
        num: {{num}}
    </div>
</template>

<script>
import bus from './eventBus'
export default {
    data() {
        return {
            num: 0
        }
    },
    created() {
        bus.$on('busAdd', val => {
            this.num = val
        })
    }
}
</script>