全局事件总线以及消息订阅

2021-09-21 18:00:35 阅读：247 来源： 互联网

标签：订阅 name bus 总线 js 全局 data hello pubsub

安装全局事件总线：

main.js:

new Vue({
    el:'#app',
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus = this//安装全局事件总线
  }
})

传值组件中

methods:{
            sendName(){
                this.$bus.$emit('hello',this.name)
            }
        }

收值组件中

mounted(){
    //创建事件hello
    this.$bus.$on('hello',(data)=>{
    console.log('收到数据',data)
        })
},
//用完记得销毁$bus里的事件
beforeDestroy(){
    this.$bus.$off('hello')
}

------------------------------------------------------------------------------------------------------------------------------------------------

安装消息订阅与发布

npm i pubsub-js

传值组件

import pubsub from 'pubsub-js'
    export default{
        name:'Student',
        data() {
            return{
                name:'张三',
                myage:18
            }
        },
        methods:{
            sendName(){
                pubsub.publish('hello',this.name)
            }
        }
    }

接受数据组件

import pubsub from 'pubsub-js'
******
mounted(){
    this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
            console.log('消息已订阅',data)
    })
},
beforeDestory(){
    pubsub.unsubscribe(this.pubId)
}

标签：订阅,name,bus,总线,js,全局,data,hello,pubsub
来源： https://www.cnblogs.com/alannero/p/15317085.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

全局事件总线以及消息订阅