feat: example

pages.json

@@ -506,15 +506,27 @@
       }
     },
     {
-      "path": "pages/examples/nested-component-communication/nested-component-communication",
+      "path": "pages/examples/nested-component-communication/nested-component-communication-options",
       "style": {
-        "navigationBarTitleText": "嵌套组件通信"
+        "navigationBarTitleText": "嵌套组件通信（选项式）"
       }
     },
     {
-      "path": "pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class",
+      "path": "pages/examples/nested-component-communication/nested-component-communication-composition",
       "style": {
-        "navigationBarTitleText": "自定义组件中使用 class 定制另一个自定义组件根节点样式"
+        "navigationBarTitleText": "嵌套组件通信（组合式）"
+      }
+    },
+    {
+      "path": "pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class-options",
+      "style": {
+        "navigationBarTitleText": "自定义组件中使用 class 定制另一个自定义组件根节点样式（选项式）"
+      }
+    },
+    {
+      "path": "pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class-composition",
+      "style": {
+        "navigationBarTitleText": "自定义组件中使用 class 定制另一个自定义组件根节点样式（组合式）"
       }
     },
     {

pages/examples/nested-component-communication/components/child.uvue

-<template>
-  <view class="child">
-    子组件: {{ msg }}
-    <grand-child></grand-child>
-  </view>
-</template>
-
-<script>
-  import grandChild from './grandChild.uvue'
-  import {
-    state
-  } from '@/store/index.uts'
-  export default {
-    components: {
-      grandChild
-    },
-    computed: {
-      msg(): number {
-        return state.componentMsg
-      }
-    }
-  }
-</script>
-<style>
-  .child {
-    margin-top: 10px;
-  }
-</style>
\ No newline at end of file
+<template>
+  <view class="child">
+    <view class="flex-row">
+      子组件:
+      <text class="child-msg">{{ msg }}</text>
+    </view>
+    <grand-child></grand-child>
+  </view>
+</template>
+
+<script>
+import grandChild from './grandChild.uvue'
+import { state } from '@/store/index.uts'
+export default {
+  components: {
+    grandChild
+  },
+  computed: {
+    msg(): number {
+      return state.componentMsg
+    }
+  }
+}
+</script>
+<style>
+.child {
+  margin-top: 10px;
+}
+</style>

pages/examples/nested-component-communication/components/grandChild.uvue

-<template>
-  <view class="child">
-    孙组件: {{ msg }}
-    <button @click="change">孙组件清空数据</button>
-  </view>
-</template>
-
-<script>
-  import {
-    state,
-    setComponentMsg
-  } from '@/store/index.uts'
-  export default {
-    computed: {
-      msg(): number {
-        return state.componentMsg
-      }
-    },
-    methods: {
-      change() {
-        setComponentMsg(0)
-      }
-    }
-  }
-</script>
-
-<style>
-  .child {
-    margin-top: 10px;
-  }
-</style>
\ No newline at end of file
+<template>
+  <view class="child">
+    <view class="flex-row">
+      孙组件:
+      <text class="grandchild-msg">{{ msg }}</text>
+    </view>
+    <button class="grandchild-btn" @click="change">孙组件清空数据</button>
+  </view>
+</template>
+
+<script>
+import { state, setComponentMsg } from '@/store/index.uts'
+export default {
+  computed: {
+    msg(): number {
+      return state.componentMsg
+    }
+  },
+  methods: {
+    change() {
+      setComponentMsg(0)
+    }
+  }
+}
+</script>
+
+<style>
+.child {
+  margin-top: 10px;
+}
+</style>

pages/examples/nested-component-communication/nested-component-communication-composition.uvue

+<template>
+  <view class="page">
+    <view class="flex-row">
+      父组件:
+      <text class="parent-msg">{{ msg }}</text>
+    </view>
+    <button class="parent-btn" @click="change">父组件改变数据</button>
+    <child />
+  </view>
+</template>
+
+<script setup lang="uts">
+import child from './components/child.uvue'
+import { setComponentMsg, state } from '@/store/index.uts'
+
+const msg = computed<number>((): number => state.componentMsg)
+
+const change = () => {
+  setComponentMsg(state.componentMsg + 1)
+}
+</script>
\ No newline at end of file

pages/examples/nested-component-communication/nested-component-communication-options.uvue

+<template>
+  <view class="page">
+    <view class="flex-row">
+      父组件:
+      <text class="parent-msg">{{ msg }}</text>
+    </view>
+    <button class="parent-btn" @click="change">父组件改变数据</button>
+    <child></child>
+  </view>
+</template>
+
+<script>
+import child from './components/child.uvue'
+import { setComponentMsg, state } from '@/store/index.uts'
+export default {
+  components: {
+    child
+  },
+  computed: {
+    msg(): number {
+      return state.componentMsg
+    }
+  },
+  methods: {
+    change() {
+      setComponentMsg(state.componentMsg + 1)
+    }
+  }
+}
+</script>

pages/examples/nested-component-communication/nested-component-communication.test.js

+const PAGE_OPTIONS = '/pages/examples/nested-component-communication/nested-component-communication-options'
+const PAGE_COMPOSITION = '/pages/examples/nested-component-communication/nested-component-communication-composition'
+
+describe('built-in/component', () => {
+  let page
+  const test = async () => {
+    await page.waitFor('view')
+    expect.assertions(12)
+    const parentMsgElement = await page.$('.parent-msg')
+    const childMsgElement = await page.$('.child-msg')
+    const grandChildElement = await page.$('.grandchild-msg')
+
+    const parentBtn = await page.$('.parent-btn')
+    const grandChildBtn = await page.$('.grandchild-btn')
+
+    expect(await parentMsgElement.text()).toEqual('0')
+    expect(await childMsgElement.text()).toEqual('0')
+    expect(await grandChildElement.text()).toEqual('0')
+
+    await parentBtn.tap()
+
+    expect(await parentMsgElement.text()).toEqual('1')
+    expect(await childMsgElement.text()).toEqual('1')
+    expect(await grandChildElement.text()).toEqual('1')
+
+    await parentBtn.tap()
+
+    expect(await parentMsgElement.text()).toEqual('2')
+    expect(await childMsgElement.text()).toEqual('2')
+    expect(await grandChildElement.text()).toEqual('2')
+
+    await grandChildBtn.tap()
+
+    expect(await parentMsgElement.text()).toEqual('0')
+    expect(await childMsgElement.text()).toEqual('0')
+    expect(await grandChildElement.text()).toEqual('0')
+  }
+  it('nested-component-communication Options API', async () => {
+    page = await program.reLaunch(PAGE_OPTIONS)
+    await test()
+  })
+  it('nested-component-communication Composition API', async () => {
+    page = await program.reLaunch(PAGE_COMPOSITION)
+    await test()
+  })
+})

pages/examples/nested-component-communication/nested-component-communication.uvue

-<template>
-  <view class="page">
-    父组件: {{ msg }}
-    <button @click="change">父组件改变数据</button>
-    <child></child>
-  </view>
-</template>
-
-<script>
-  import child from './components/child.uvue'
-  import { setComponentMsg, state } from '@/store/index.uts'
-  export default {
-    components: {
-      child
-    },
-    computed: {
-      msg() : number {
-        return state.componentMsg
-      }
-    },
-    methods: {
-      change() {
-        setComponentMsg(state.componentMsg + 1)
-      }
-    }
-  }
-</script>
\ No newline at end of file

pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class-composition.uvue

+<template>
+  <view>
+    <button class="btn-page bg-green">button in parent page</button>
+    <Child />
+  </view>
+</template>
+
+<script setup lang="uts">
+import Child from './child.uvue'
+</script>
+
+<style>
+.btn-page {
+  width: 280px;
+  color: rgb(209, 51, 51);
+}
+.bg-green {
+  background-color: rgb(105, 154, 105);
+}
+</style>
\ No newline at end of file

pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class.test.js

-const PAGE_PATH =
-  '/pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class'
+const PAGE_PATH = '/pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class-options'
+const PAGE_PATH_COMPOSITION = '/pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class-composition'
 
 describe('自定义组件中使用 class 定制另一个自定义组件根节点样式', () => {
   let page
-  beforeAll(async () => {
+
+  it('set-custom-child-component-root-node-class-options Screenshot', async () => {
     page = await program.reLaunch(PAGE_PATH)
     await page.waitFor('view')
+    const image = await program.screenshot()
+    expect(image).toMatchImageSnapshot()
   })
 
-  it('screenshot', async () => {
+  it('set-custom-child-component-root-node-class-options Screenshot', async () => {
+    page = await program.reLaunch(PAGE_PATH_COMPOSITION)
+    await page.waitFor('view')
     const image = await program.screenshot()
     expect(image).toMatchImageSnapshot()
   })

pages/index/index.uvue

@@ -348,6 +348,44 @@ export default {
               url: 'unrecognized-component/unrecognized-component'
             }
           ] as Page[]
+        },
+        {
+          id: 'examples',
+          name: '示例',
+          pages: [
+            {
+              id: 'nested-component-communication',
+              name: '嵌套组件通讯',
+              children: [
+                {
+                  id: 'nested-component-communication-options',
+                  name: '选项式',
+                  url: 'nested-component-communication-options'
+                },
+                {
+                  id: 'nested-component-communication-composition',
+                  name: '组合式',
+                  url: 'nested-component-communication-composition'
+                }
+              ]
+            },
+            {
+              id: 'set-custom-child-component-root-node-class',
+              name: '自定义组件中使用 class 定制另一个自定义组件根节点样式',
+              children: [
+                {
+                  id: 'set-custom-child-component-root-node-class-options',
+                  name: '选项式',
+                  url: 'set-custom-child-component-root-node-class-options'
+                },
+                {
+                  id: 'set-custom-child-component-root-node-class-composition',
+                  name: '组合式',
+                  url: 'set-custom-child-component-root-node-class-composition'
+                }
+              ]
+            }
+          ] as Page[]
         }
       ] as Menu[]
     }