首页 > 其他分享 >全局事件总线

全局事件总线

时间:2022-08-23 09:33:58浏览次数:39  
标签:log 总线 eventBus event export 事件 whyEvent whyEventHandler 全局

1.引入库

在 src/until/event-bus.js

import { HYEventBus } from 'hy-event-store'

const eventBus = new HYEventBus()

export default eventBus

 

2. 使用 

  1.发送 

<template>
  <div class="banner">
    <button @click="bannerBtnClick">banner按钮</button>
  </div>
</template>

<script>
  import eventBus from './utils/event-bus'

  export default {
    methods: {
      bannerBtnClick() {
        // 发送
        console.log("bannerBtnClick")
        eventBus.emit("whyEvent", "why", 18, 1.88)
      }
    }
  }
</script>

  2.监听 和 移除

<template>
  <div>
    <h2>Category</h2>
  </div>
</template>

<script>
  import eventBus from './utils/event-bus'

  export default {
    methods: {
      whyEventHandler() {
        console.log("whyEvent在category中监听")
      }
    },
    created() {
      // 监听
      eventBus.on("whyEvent", this.whyEventHandler)
    },
    unmounted() {
      // 移除
      console.log("category unmounted")
      eventBus.off("whyEvent", this.whyEventHandler)
    }
  }
</script>

 

标签:log,总线,eventBus,event,export,事件,whyEvent,whyEventHandler,全局
From: https://www.cnblogs.com/qd-lbxx/p/16615008.html

相关文章