feat: 补充 $emit 无参及多参数情况示例及测试 issue:11588

pages/API/event-bus/event-bus.test.js

@@ -86,4 +86,21 @@ describe('event-bus', () => {
     expect(logs[0]).toBe('触发 test-return-id $on fn')
     expect(logs[1]).toBe('触发 test-return-id $once fn')
   })
+  it('test $emit no args', async () => {
+    await page.callMethod('clear')
+    expect((await page.data()).log.length).toBe(0)
+    await page.callMethod('testEmitNoArgs')
+    const logs = await page.data('log')
+    expect(logs.length).toBe(1)
+    expect(logs[0]).toBe('test-emit-no-args')
+  })
+  it('test $emit multiple args', async () => {
+    await page.callMethod('clear')
+    expect((await page.data()).log.length).toBe(0)
+    await page.callMethod('testEmitMultipleArgs')
+    const logs = await page.data('log')
+    expect(logs.length).toBe(1)
+    expect(logs[0]).toBe('arg1_2')
+  })
+  
 })

pages/API/event-bus/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>
+    <!-- #endif -->
+    <view class="box">
+      <button class="uni-btn" @click="on">开始监听</button>
+      <button class="uni-btn" @click="once">监听一次</button>
+      <button class="uni-btn" @click="off">取消监听</button>
       <!-- <button @click="offAll">取消全部监听</button> -->
-      <button @click="emit">触发监听</button>
-      <button @click="clear">清空消息</button>
-      <view class="box">
-        <view>收到的消息：</view>
-        <view>
+      <button class="uni-btn" @click="emit">触发监听</button>
+      <button class="uni-btn" @click="clear">清空消息</button>
+      <view>
+        <view class="uni-btn">收到的消息：</view>
+        <view class="uni-btn">
           <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">
+        <button class="uni-btn" @click="onObj">开始监听 obj 参数</button>
+        <button class="uni-btn" @click="emitWithObj">触发监听 obj 参数</button>
+        <view class='uni-btn'>
           <text>接收到的 obj 参数：</text>
-          <text>{{JSON.stringify(objArg)}}</text>
+          <text>{{ JSON.stringify(objArg) }}</text>
         </view>
-        <button @click="testReturnId">测试返回 id</button>
+        <button class='uni-btn' @click="testReturnId">测试返回 id</button>
+        <button class='uni-btn' @click="testEmitNoArgs">测试 $emit 无参</button>
+        <button class='uni-btn' @click="testEmitMultipleArgs">测试 $emit 多个参数</button>
       </view>
     </view>
-  <!-- #ifdef APP -->
+    <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        log: [] as string[],
-        objArg: {},
-      }
+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)
     },
-    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')
+    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')
-      }
+      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')
+    },
+    testEmitNoArgs() {
+      uni.$on('test-emit-no-args', () => {
+        this.log.push('test-emit-no-args')
+      })
+      uni.$emit('test-emit-no-args')
+      uni.$off('test-emit-no-args')
     },
-  }
+    testEmitMultipleArgs() {
+      uni.$on('test-emit-multiple-args', (arg1 : string, arg2 : number) => {
+        this.log.push(`${arg1}_${arg2}`)
+      })
+      uni.$emit('test-emit-multiple-args', 'arg1', 2)
+      uni.$off('test-emit-multiple-args')
+    }
+  },
+}
 </script>
 
 <style>
-  .box {
-    padding: 10px;
-  }
+.box {
+  padding: 10px;
+}
 </style>