小柒

www.xiaoqi.cn

0%

Vue3事件总线

发表于 分类于

全局事件总线

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

安装全局事件总线：

  1. 引入/编写事件库

  2. 在入口文件中挂载

  3. 在组件中引入并使用

    安装：npm install –save vue3-eventbus

    挂载：

    1
    2
    3
    //App.vue
    import eventBus from 'vue3-eventbus'
    app.use(eventBus)

    使用：

    1
    2
    3
    4
    5
    6
    7
    8
    //Button.vue
    import bus from 'vue3-eventbus'
    export default {
    	setup(){
    		bus.emit('foo',{a:'b'})
    	}
    }

    消息订阅预发布（pubsub)

    1. 安装pubsub:npm install pubsub-js

    2. 引入：import pubsub from “pubsub-js”

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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      methods(){
      	demo(data){

      	}
      }
      mounted(){
      this.pid=pubsub.subscribe('xxx',(msg,data)=>{

      })//订阅消息
      }
      1. 提供数据：pubsub.publish(‘xxx’,数据)
      2. 最好在beforeDestroy钩子中，用Pubsub.unsubscribe(pid)取消订阅