vue 中央事件总线理解使用

中央事件总线

可以理解为这是一个传话人员

// 新建一个 Bus.vue文件,new 一个 vue 实例导出
export default new Vue({
    name: 'bus',
    data () {
        return {
            // code
        }
    }
})
// 新建一个组件 A
<tempalte>
    <button @click="sendMessage"向组件 B 发送数据</button>
</tempalte>
<script>
import Bus from 'Bus.vue'
    export default {
        name: 'componentA',
        data () {
            return {
                msg: 'the message is from componentA'
            }
        },
        methods: {
            sendMessage () {
                Bus.$emit('inceptMessage', this.msg)
            }
        }
    }
</script>

假设知道组件 B 有个方法叫做 inceptMessage(接收数据的方法) 组件 A对组件 B 说 我要通过 Bus 这个传话员给你传话了,你先告诉我 这么理解,当组件 A 通过 Bus 传话员去触发inceptMessage这个方法的时候,组件 B 是可以感应到组件 A 调用了这个方法的 Bus 通过触发组件 B 的inceptMessage方法将 msg 发送过去了,这个时候组件 B 还不知道组件 A 给它发送了一条数据

// 新建一个组件 B
<tempalte>
    // 显示组件 A 传过来的数据
    <h1>{{ fromComponentAMsg }}</h1>
</tempalte>
<script>
import Bus from 'Bus.vue'
    export default {
        name: 'componentB',
        data () {
            return {
                fromComponentAMsg: ''
            }
        },
        methods: {
        },
        mounted () {
            Bus.$on('inceptMessage',(msg) => {
                this.fromComponentAMsg = msg
            })
        }
    }
</script>

这个时候组件 B 知道组件 A 给它传了一条数据过来了,于是赶紧叫 Bus 这个传话员把数据告诉它 bus 就告诉组件 B, 组件 A 那边通过inceptMessage传过来一条数据叫 msg,这样就可以在兄弟组件之间传输数据了,对于小项目这种方式进行组件通讯是非常方便的