uts-event-bus.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view class="page-scroll-view">
  <!-- #endif -->
    <view>
      <button @click="JsOnUts">1. js监听uts消息</button>
      <button @click="emitFromUts">2. uts中触发监听</button>
       <button @click="offUts">取消uts消息监听</button>

      <button @click="UtsOnJS">1. uts监听js消息</button>
      <button @click="emitFormJS">2 .js中触发监听</button>
      <button @click="offJs">取消js消息监听</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>
    <button @click="testAll">test all</button>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  import {
    onJsMessage,
    offJsMessage,
    emitUtsMessage,
    getMessageChannel,
    getRevJsMessage,
    clearJsMessage,
    onJsMessageOnce,
  } from "@/uni_modules/uts-eventbus"


  export default {
    data() {
      return {
        log: [] as string[],
      }
    },
    methods: {
      fn(res : string, res2 : string) {
        console.log("on rev: " + res)
        this.log.push(res)
        this.log.push(res2)
      },
      fn2(res : string) {
        this.log.push(res)
      },
      JsOnUts() {
        uni.$off(getMessageChannel(), this.fn)
        uni.$on(getMessageChannel(), this.fn)
      },
      offUts() {
        uni.$off(getMessageChannel(), this.fn)
      },
      emitFromUts() {
        emitUtsMessage("emit form uts")
      },
      JsOnUtsOnce() {
        uni.$once(getMessageChannel(), this.fn2)
      },
      UtsOnJS() {
        onJsMessage("JsMessage")
      },
      UtsOnJSOnce() {
        onJsMessageOnce("JsMessage")
      },
      offJs() {
        offJsMessage("JsMessage")
      },
      emitFormJS() {
        clearJsMessage()
        uni.$emit("JsMessage", "emit form js")
        let msg = getRevJsMessage()
        console.log("message:"+msg)
        if (msg && msg.length){
          this.log.push(msg)
        }
      },
      clear() {
        clearJsMessage()
        this.log.length = 0
      },
      testAll() {
      	this.JsOnUts();
      	this.emitFromUts();
      	this.UtsOnJS();
      	this.emitFormJS();
      }
    },
  }
</script>

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