全局事件总线

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>

 

posted @ 2022-08-23 09:24  杨建鑫  阅读(54)  评论(0编辑  收藏  举报