event-bus.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view class="page-scroll-view">
  <!-- #endif -->
    <view>
      <button @click="on">开始监听</button>
      <button @click="once">监听一次</button>
      <button @click="off">取消监听</button>
      <!-- <button @click="offAll">取消全部监听</button> -->
      <button @click="emit">触发监听</button>
      <button @click="clear">清空消息</button>
      <view class="box">
        <view>收到的消息：</view>
        <view>
          <view v-for="(item, index) in log" :key="index">{{ item }}</view>
        </view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  export default {
    data() {
      return {
        log: [] as string[],
      }
    },
    methods: {
      fn(res : string) {
        this.log.push(res)
      },
      fn2(res : string) {
        this.log.push(res)
      },
      on() {
        uni.$on('test', this.fn)
      },
      on2() {
        uni.$on('test', this.fn2)
      },
      once() {
        uni.$once('test', this.fn)
      },
      off() {
        uni.$off('test', this.fn)
      },
      offAll() {
        // TODO 第二个参数为可选，后续优化后可不传递
        //uni.$off('test', null)
      },
      emit() {
        uni.$emit('test', 'msg:' + Date.now())
      },
      clear() {
        this.log.length = 0
      },
    },
  }
</script>

<style>
  .box {
    padding: 10px;
  }
</style>