feat(composition api): defineModel

pages/composition-api/basic/define-model/Foo.uvue

+<template>
+  <view>
+    <text id="model-value-text">modelValue in Foo: {{modelValue}}</text>
+    <text class='uni-common-mt' id="msg-text">msg in Foo: {{msg}}</text>
+    <button class='uni-common-mt' id="update-value-btn" @click='updateValue'>update value</button>
+  </view>
+</template>
+
+<script setup>
+  // 在被修改时，触发 "update:modelValue" 事件
+  const modelValue = defineModel({ type: String })
+
+  // 在被修改时，触发 "update:msg" 事件
+  const msg = defineModel('msg', { type: String })
+
+  const updateValue = () => {
+    modelValue.value += '1'
+    msg.value += '2'
+  }
+</script>
\ No newline at end of file

pages/composition-api/basic/define-model/define-model.test.js

+const PAGE_PATH = '/pages/composition-api/basic/define-model/define-model'
+
+describe('defineModel', () => {
+  if (process.env.uniTestPlatformInfo.startsWith('android')) {
+    let page = null
+    beforeAll(async () => {
+      page = await program.reLaunch(PAGE_PATH)
+      await page.waitFor('view')
+    })
+    it('basic', async () => {
+      const modelValueText = await page.$('#model-value-text')
+      expect(await modelValueText.text()).toBe('modelValue in Foo: str')
+
+      const modelValueInput = await page.$('#model-value-input')
+      expect(await modelValueInput.property('value')).toBe('str')
+
+      const msgText = await page.$('#msg-text')
+      expect(await msgText.text()).toBe('msg in Foo: msg')
+
+      const msgInput = await page.$('#msg-input')
+      expect(await msgInput.property('value')).toBe('msg')
+
+      const updateValueBtn = await page.$('#update-value-btn')
+      await updateValueBtn.tap()
+
+      expect(await modelValueText.text()).toBe('modelValue in Foo: str1')
+      expect(await modelValueInput.property('value')).toBe('str1')
+
+      expect(await msgText.text()).toBe('msg in Foo: msg2')
+      expect(await msgInput.property('value')).toBe('msg2')
+    })
+  } else {
+    it('other platform', () => {
+      expect(1).toBe(1)
+    })
+  }
+})
\ No newline at end of file

pages/composition-api/basic/define-model/define-model.uvue

 <template>
-  <view class="page"> defineModel </view>
+  <view class="page">
+    <Foo v-model='str' v-model:msg="msg" @update:modelValue="handleModelValueUpdate" @update:msg="handleMsgUpdate" />
+    <input class='uni-common-mt input' id="model-value-input" v-model="str" />
+    <input class='uni-common-mt input' id="msg-input" v-model="msg" />
+  </view>
 </template>
 
-<script setup></script>
+<script setup>
+  import Foo from './Foo.uvue'
+
+  const str = ref('str')
+  const msg = ref('msg')
+
+  const handleModelValueUpdateRes = ref('')
+  const handleModelValueUpdate = (val : string) => {
+    handleModelValueUpdateRes.value = `new str value: ${val}`
+  }
+  const handleMsgUpdateRes = ref('')
+  const handleMsgUpdate = (val : string) => {
+    handleMsgUpdateRes.value = `new msg value: ${val}`
+  }
+</script>
+
+<style>
+  .input {
+    padding: 8px 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+</style>
\ No newline at end of file

pages/tab-bar/composition-api.uvue

@@ -67,6 +67,11 @@
             url: 'define-slots',
             enable: true,
           },
+{
+            name: 'defineModel',
+            url: 'define-model',
+            enable: true,
+          },
           {
             name: 'useSlots',
             url: 'use-slots',