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>
        <button @click="onObj">开始监听 obj 参数</button>
        <button @click="emitWithObj">触发监听 obj 参数</button>
        <view class="box">
          <text>接收到的 obj 参数：</text>
          <text>{{JSON.stringify(objArg)}}</text>
        </view>
        <button @click="testReturnId">测试返回 id</button>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  export default {
    data() {
      return {
        log: [] as string[],
        objArg: {},
      }
    },
    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)
      },
      onObj() {
        uni.$on('test-obj', (res : UTSJSONObject) => {
          this.objArg = res
        })
      },
      once() {
        uni.$once('test', this.fn)
      },
      off() {
        uni.$off('test', this.fn)
      },
      offAll() {
        uni.$off('test')
      },
      emit() {
        uni.$emit('test', 'msg:' + Date.now())
      },
      emitWithObj() {
        uni.$emit('test-obj', { a: 1, b: 2 })
      },
      clear() {
        this.log.length = 0
      },
      testReturnId(){
        const id1 = uni.$on('test-return-id', this.fn)
        uni.$emit('test-return-id', '触发 test-return-id $on fn')
        uni.$off('test-return-id', id1)
        uni.$emit('test-return-id', '触发 test-return-id $on fn')

        uni.$once('test-return-id', this.fn)
        uni.$emit('test-return-id', '触发 test-return-id $once fn')
        uni.$emit('test-return-id', '触发 test-return-id $once fn')
        const id2 = uni.$once('test-id', this.fn)
        uni.$off('test-return-id', id2)
        uni.$emit('test-return-id', '触发 test-return-id $once fn')
      }
    },
  }
</script>

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