refactor(component-instance): emit

pages.json

@@ -126,13 +126,13 @@
     {
       "path": "pages/built-in/component/keep-alive/keep-alive-options",
       "style": {
-        "navigationBarTitleText": "keep-alive（选项式 API）"
+        "navigationBarTitleText": "keep-alive 选项式 API"
       }
     },
     {
       "path": "pages/built-in/component/keep-alive/keep-alive-composition",
       "style": {
-        "navigationBarTitleText": "keep-alive（组合式 API）"
+        "navigationBarTitleText": "keep-alive 组合式 API"
       }
     },
     {
@@ -280,14 +280,14 @@
     {
       "path": "pages/lifecycle/page/page-composition",
       "style": {
-        "navigationBarTitleText": "page-lifecycle（组合式 API）",
+        "navigationBarTitleText": "page-lifecycle 组合式 API",
         "enablePullDownRefresh": true
       }
     },
     {
       "path": "pages/lifecycle/page/page-options",
       "style": {
-        "navigationBarTitleText": "page-lifecycle（选项式 API）",
+        "navigationBarTitleText": "page-lifecycle 选项式 API",
         "enablePullDownRefresh": true
       }
     },
@@ -312,13 +312,13 @@
     {
       "path": "pages/component-instance/refs/refs-options",
       "style": {
-        "navigationBarTitleText": "$refs（选项式 API）"
+        "navigationBarTitleText": "$refs 选项式 API"
       }
     },
     {
       "path": "pages/component-instance/refs/refs-composition",
       "style": {
-        "navigationBarTitleText": "$refs（组合式 API）"
+        "navigationBarTitleText": "$refs 组合式 API"
       }
     },
     {
@@ -334,9 +334,15 @@
       }
     },
     {
-      "path": "pages/component-instance/emit-function/emit-function",
+      "path": "pages/component-instance/emit-function/emit-function-options",
       "style": {
-        "navigationBarTitleText": "$emit()"
+        "navigationBarTitleText": "$emit() 选项式 API"
+      }
+    },
+    {
+      "path": "pages/component-instance/emit-function/emit-function-composition",
+      "style": {
+        "navigationBarTitleText": "defineEmits 组合式 API"
       }
     },
     {
@@ -414,37 +420,37 @@
     {
       "path": "pages/built-in/component/slots/slots-composition",
       "style": {
-        "navigationBarTitleText": "slots（组合式 API）"
+        "navigationBarTitleText": "slots 组合式 API"
       }
     },
     {
       "path": "pages/built-in/component/slots/slots-options",
       "style": {
-        "navigationBarTitleText": "slots（选项式 API）"
+        "navigationBarTitleText": "slots 选项式 API"
       }
     },
     {
       "path": "pages/built-in/component/template/template-options",
       "style": {
-        "navigationBarTitleText": "template（选项式 API）"
+        "navigationBarTitleText": "template 选项式 API"
       }
     },
     {
       "path": "pages/built-in/component/template/template-composition",
       "style": {
-        "navigationBarTitleText": "template（组合式 API）"
+        "navigationBarTitleText": "template 组合式 API"
       }
     },
     {
       "path": "pages/built-in/component/template/template-map-style-options",
       "style": {
-        "navigationBarTitleText": "template-map-style（选项式 API）"
+        "navigationBarTitleText": "template-map-style 选项式 API"
       }
     },
     {
       "path": "pages/built-in/component/template/template-map-style-composition",
       "style": {
-        "navigationBarTitleText": "template-map-style（组合式 API）"
+        "navigationBarTitleText": "template-map-style 组合式 API"
       }
     },
     {
@@ -456,13 +462,13 @@
     {
       "path": "pages/built-in/component/component/component-options",
       "style": {
-        "navigationBarTitleText": "component（选项式 API）"
+        "navigationBarTitleText": "component 选项式 API"
       }
     },
     {
       "path": "pages/built-in/component/component/component-composition",
       "style": {
-        "navigationBarTitleText": "component（组合式 API）"
+        "navigationBarTitleText": "component 组合式 API"
       }
     },
     {
@@ -520,25 +526,25 @@
     {
       "path": "pages/examples/nested-component-communication/nested-component-communication-options",
       "style": {
-        "navigationBarTitleText": "嵌套组件通信（选项式 API）"
+        "navigationBarTitleText": "嵌套组件通信 选项式 API"
       }
     },
     {
       "path": "pages/examples/nested-component-communication/nested-component-communication-composition",
       "style": {
-        "navigationBarTitleText": "嵌套组件通信（组合式 API）"
+        "navigationBarTitleText": "嵌套组件通信 组合式 API"
       }
     },
     {
       "path": "pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class-options",
       "style": {
-        "navigationBarTitleText": "自定义组件中使用 class 定制另一个自定义组件根节点样式（选项式 API）"
+        "navigationBarTitleText": "自定义组件中使用 class 定制另一个自定义组件根节点样式 选项式 API"
       }
     },
     {
       "path": "pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class-composition",
       "style": {
-        "navigationBarTitleText": "自定义组件中使用 class 定制另一个自定义组件根节点样式（组合式 API）"
+        "navigationBarTitleText": "自定义组件中使用 class 定制另一个自定义组件根节点样式 组合式 API"
       }
     },
     {
@@ -770,14 +776,14 @@
     {
       "path": "pages/built-in/component/teleport/teleport-options",
       "style": {
-        "navigationBarTitleText": "teleport（选项式 API）",
+        "navigationBarTitleText": "teleport 选项式 API",
         "enablePullDownRefresh": false
       }
     },
     {
       "path": "pages/built-in/component/teleport/teleport-composition",
       "style": {
-        "navigationBarTitleText": "teleport（组合式 API）",
+        "navigationBarTitleText": "teleport 组合式 API",
         "enablePullDownRefresh": false
       }
     },

pages/component-instance/emit-function/child-composition.uvue

+<template>
+  <view>
+    <button @click="click" class="call-parent-btn">调用父组件事件</button>
+  </view>
+</template>
+
+<script setup lang="uts">
+const emit = defineEmits(['callback'])
+
+const click = () => {
+  emit('callback', `${Date.now()}`)
+}
+
+defineExpose({
+  click
+})
+</script>
\ No newline at end of file

pages/component-instance/emit-function/emit-function-composition.uvue

+<template>
+  <view class="page">
+    <view class="row">
+      <text>子组件传的参数</text>
+      <text>
+        {{ value }}
+      </text>
+    </view>
+    <child @callback="callback"></child>
+  </view>
+</template>
+
+<script setup lang="uts">
+import child from './child-composition.uvue'
+
+defineOptions({
+  data() {
+    return {
+      value: ''
+    }
+  },
+  methods: {
+    callback(str: string) {
+      this.value = str
+    }
+  }
+})
+</script>
+
+<style>
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+</style>
\ No newline at end of file

pages/component-instance/emit-function/emit-function.uvue → pages/component-instance/emit-function/emit-function-options.uvue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import child from './child.uvue'
+import child from './child-options.uvue'
 
 export default {
   components: {

pages/component-instance/emit-function/emit-function.test.js

-const PAGE_PATH = '/pages/component-instance/emit-function/emit-function'
+const PAGE_PATH = '/pages/component-instance/emit-function/emit-function-options'
+const PAGE_COMPOSITION_PATH = '/pages/component-instance/emit-function/emit-function-composition'
 
 describe('$emit()', () => {
   let page
-  beforeAll(async () => {
+  it('$emit() 选项式 API 事件生效', async () => {
     page = await program.reLaunch(PAGE_PATH)
     await page.waitFor(500)
+    const beforeValue = await page.data('value')
+    const btn = await page.$('.call-parent-btn')
+
+    btn.tap()
+
+    const afterValue = await page.data('value')
+
+    expect(beforeValue).not.toBe(afterValue)
   })
 
-  it('$emit() 事件生效', async () => {
+  it('$emit() 组合式 API 事件生效', async () => {
+    page = await program.reLaunch(PAGE_COMPOSITION_PATH)
+    await page.waitFor(500)
     const beforeValue = await page.data('value')
     const btn = await page.$('.call-parent-btn')
 

pages/component-instance/force-update/force-update-composition.uvue

+<template>
+  <view class="page">
+    <view class="split-title">$forceUpdate</view>
+    <text class="uni-common-mt time">Date.now(): {{ Date.now() }}</text>
+    <button class="uni-common-mt trigger-force-update-btn" type="primary" @click="triggerForceUpdate">trigger $forceUpdate</button>
+  </view>
+</template>
+
+<script setup lang="uts">
+const instance = getCurrentInstance()
+
+const triggerForceUpdate = () => {
+  instance.$.forceUpdate()
+}
+
+defineExpose({
+  triggerForceUpdate
+})
+</script>

pages/index/index.uvue

@@ -248,6 +248,22 @@ export default {
                   url: 'refs-composition'
                 }
               ]
+            },
+            {
+              id: 'emit-function',
+              name: '$emit',
+              children: [
+                {
+                  id: 'emit-options',
+                  name: '$emit 选项式 API',
+                  url: 'emit-function-options'
+                },
+                {
+                  id: 'emit-composition',
+                  name: 'defineEmits 组合式 API',
+                  url: 'emit-function-options'
+                }
+              ]
             }
           ] as Page[]
         },