refactor(component-instance): refs

pages.json

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

pages/component-instance/refs/child-composition.uvue

+<script setup lang="uts">
+const value = ref<string>('child value')
+</script>
+
+<template>
+  {{ value }}
+</template>
\ No newline at end of file

pages/component-instance/refs/child.uvue → pages/component-instance/refs/child-options.uvue

 <script>
 export default {
-  data () {
+  data() {
     return {
-      value: "child value"
+      value: 'child value'
     }
   }
 }
 </script>
 
 <template>
-
+  {{ value }}
 </template>
-
-<style scoped>
-
-</style>

pages/component-instance/refs/refs-composition.uvue

+<template>
+  <view class="page">
+    <view ref="nodeRef">NodeRef: {{ refObject.existRef }}</view>
+    <view ref="nodeRef">childRef: {{ refObject.exisChildRef }}</view>
+    <Child ref="childRef">ComponentRef</Child>
+  </view>
+</template>
+
+<script setup lang="uts">
+import Child from './child-composition.uvue'
+
+type RefObject = { existRef: boolean; exisChildRef: boolean }
+
+// NOTE 由于自动化测试读不到 ref，composition 改为使用 reactive
+const refObject = reactive<RefObject>({
+  existRef: false,
+  exisChildRef: false
+} as RefObject)
+
+const nodeRef = ref<ComponentPublicInstance | null>(null)
+const childRef = ref<ComponentPublicInstance | null>(null)
+
+onReady(() => {
+  refObject.existRef = nodeRef.value !== null
+  refObject.exisChildRef = childRef.value !== null
+})
+
+defineExpose({
+  refObject
+})
+</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/refs/refs-options.uvue

+<template>
+  <view class="page">
+    <view ref="node">NodeRef: {{ existRef }}</view>
+    <view ref="nodeRef">childRef: {{ exisChildRef }}</view>
+    <child ref="childRef">ComponentRef</child>
+  </view>
+</template>
+
+<script lang="uts">
+import child from './child-options.uvue'
+
+export default {
+  components: {
+    child
+  },
+  data() {
+    return {
+      existRef: false,
+      exisChildRef: false
+    }
+  },
+  onReady() {
+    this.existRef = this.$refs['node'] !== null
+    this.exisChildRef = this.$refs['childRef'] !== null
+  }
+}
+</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/refs/refs.test.js

-const PAGE_PATH = '/pages/component-instance/refs/refs'
+const PAGE_PATH = '/pages/component-instance/refs/refs-options'
+const PAGE_COMPOSITION_PATH = '/pages/component-instance/refs/refs-composition'
 
 describe('$refs', () => {
   let page
-  beforeAll(async () => {
+
+  it('$refs 选项式 API 属性生效', async () => {
     page = await program.reLaunch(PAGE_PATH)
     await page.waitFor(500)
-  })
 
-  it('$refs 属性生效', async () => {
+    expect.assertions(2)
     const data = await page.data()
 
     expect(data.existRef).toBe(true)
-  });
+    expect(data.exisChildRef).toBe(true)
+  })
+
+  it('$refs 组合式 API 属性生效', async () => {
+    page = await program.reLaunch(PAGE_COMPOSITION_PATH)
+    await page.waitFor(500)
+
+    expect.assertions(2)
+    const data = await page.data()
+    console.log('data: ',data);
+    expect(data.refObject.existRef).toBe(true)
+    expect(data.refObject.exisChildRef).toBe(true)
+  })
 })

pages/component-instance/refs/refs.uvue

-<template>
-  <view class="page">
-    <view ref="node">NodeRef: {{existRef}}</view>
-<!--    <child ref="component">ComponentRef</child>-->
-  </view>
-</template>
-
-<script lang='uts'>
-// import child from './child.uvue'
-
-export default {
-  // components: {
-  //   child
-  // },
-  data () {
-    return {
-      existRef: false
-    }
-  },
-  mounted () {
-    const nodeRef = this.$refs['node']
-
-    this.existRef = nodeRef !== null
-
-//    console.log(this.$refs)
-  }
-}
-</script>
-
-<style>
-  .row {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin-bottom: 10px;
-  }
-</style>

pages/index/index.uvue

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