VUE--全局事件总线&&消息订阅与发布(pubsub)

全局事件总线

    1.一种组件间通信的方式，适用于任意组件间通信

    2.安装全局事件总线：

                new Vue({

                ......

                beforeCreate(){

                    Vue.prototype.$bus = this //安装全局事件总线 $bus就是当前应用的vm

                }

                ...........

                })

    3.使用事件总线:

        (1).接收数据：A组件想接收数据。则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

            methods(){

                demo(data){......}

            }

            mounted(){

                this.$bus.$on('xxxx',this.demo)

            }

            或

             mounted() {

                this.$bus.$on('xxxx',(data)=>{

                console.log('我是school组件，我收到了数据',data);

                })

            },

        (2).提供数据： this.$bus.$emit('xxx',数据)

    4.最好在 beforeDestroy钩子中，用$off去解构当前组件所用到的事件

            beforeDestroy(){

                this.$bus.$off('xxx')

            }

 消息订阅与发布(pubsub)

    1.一种组件间通信的方式，适用于任意组件间通信

    2.使用步骤：

        (1).安装pubsub: npm i pubsub-js

        (2).引入：import pubsub from 'pubsub-js'

        (3).接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

            消息订阅第一种方式

             mounted() {

                this.pubId = pubsub.subscribe('hello',(msgName,data) => {

                console.log('有人发布了hello消失，hello消失的回调执行了',msgName,data);

                 })

             },

             消息订阅第二种方式

            methods: {

               demo(msgName,data){

                console.log('有人发布了hello消失，hello消失的回调执行了',msgName,data);

                }

            },

            mounted() {

                this.pubId = pubsub.subscribe('hello',this.demo) 订阅消息

                },

            beforeDestroy(){

                 pubsub.unsubscribe(this.pubId)

              }

        (4).提供数据： pubsub.publish('hello',this.name)

        (5).最好在 beforeDestroy钩子中，用 pubsub.unsubscribe(this.pubId)取消订阅