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

Posted 2023-03-11

参考技术A     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')

           

    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)取消订阅