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

@@ -2,25 +2,27 @@
   <!-- #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>
+      <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 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 -->
@@ -29,7 +31,7 @@
 </template>
 
 <script>
-  export default {
+export default {
   data() {
     return {
       log: [] as string[],
@@ -84,13 +86,27 @@
       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 {
+.box {
   padding: 10px;
-  }
+}
 </style>