提交 caa20390 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

feat(composition api): defineEmits

上级 4b0db2b9
<template>
<view>
<text class="bold">array literal</text>
<button id="array-literal-emit-btn" class="uni-common-mt" @click="emitChange">emit change</button>
</view>
</template>
<script setup>
const emit = defineEmits(['change'])
const emitChange = () => {
emit('change', 1)
}
</script>
\ No newline at end of file
const PAGE_PATH = '/pages/composition-api/basic/define-emits/define-emits'
describe('defineEmits', () => {
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 handleArrayLiteralChangeRes = await page.$('#handle-array-literal-change-res')
expect(await handleArrayLiteralChangeRes.text()).toBe('handle array literal comp change result: ')
const arrayLiteralEmitBtn = await page.$('#array-literal-emit-btn')
await arrayLiteralEmitBtn.tap()
expect(await handleArrayLiteralChangeRes.text()).toBe('handle array literal comp change result: options is 1')
const handleTypeEmits1ChangeRes = await page.$('#handle-type-emits1-change-res')
expect(await handleTypeEmits1ChangeRes.text()).toBe('handle type emits comp change result: ')
const typeEmits1EmitBtn = await page.$('#type-emits1-emit-btn')
await typeEmits1EmitBtn.tap()
expect(await handleTypeEmits1ChangeRes.text()).toBe('handle type emits comp change result: options is 2')
const handleTypeEmits2ChangeRes = await page.$('#handle-type-emits2-change-res')
expect(await handleTypeEmits2ChangeRes.text()).toBe('handle type emits named tuple syntax comp change result: ')
const typeEmits2EmitBtn = await page.$('#type-emits2-emit-btn')
await typeEmits2EmitBtn.tap()
expect(await handleTypeEmits2ChangeRes.text()).toBe('handle type emits named tuple syntax comp change result: options is 3')
})
} else {
it('other platform', () => {
expect(1).toBe(1)
})
}
})
\ No newline at end of file
<template>
<view class="page"> defineEmits </view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="page">
<ArrayLiteral @change='handleArrayLiteralCompChange' />
<text id="handle-array-literal-change-res" class="uni-common-mt">handle array literal comp change result:
{{handleArrayLiteralCompChangeRes}}</text>
<TypeEmits1 @change='handleTypeEmits1CompChange' />
<text id="handle-type-emits1-change-res" class="uni-common-mt">handle type emits comp change result:
{{handleTypeEmits1CompChangeRes}}</text>
<TypeEmits2 @change='handleTypeEmits2CompChange' />
<text id="handle-type-emits2-change-res" class="uni-common-mt">handle type emits named tuple syntax comp change
result: {{handleTypeEmits2CompChangeRes}}</text>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script setup></script>
<script setup>
import ArrayLiteral from './array-literal.uvue';
import TypeEmits1 from './type-emits-1.uvue';
import TypeEmits2 from './type-emits-2.uvue';
const handleArrayLiteralCompChangeRes = ref('')
const handleArrayLiteralCompChange = (num : number) => {
handleArrayLiteralCompChangeRes.value = `options is ${num}`
}
const handleTypeEmits1CompChangeRes = ref('')
const handleTypeEmits1CompChange = (num : number) => {
handleTypeEmits1CompChangeRes.value = `options is ${num}`
}
const handleTypeEmits2CompChangeRes = ref('')
const handleTypeEmits2CompChange = (num : number) => {
handleTypeEmits2CompChangeRes.value = `options is ${num}`
}
</script>
\ No newline at end of file
<template>
<view>
<text class="uni-common-mt bold">type emits</text>
<button id="type-emits1-emit-btn" class="uni-common-mt" @click="emitChange">emit change</button>
</view>
</template>
<script setup>
const emit = defineEmits<{
(e : 'change', id : number) : void
}>()
const emitChange = () => {
emit('change', 2)
}
</script>
\ No newline at end of file
<template>
<view>
<text class="uni-common-mt bold">type emits named tuple syntax</text>
<button id="type-emits2-emit-btn" class="uni-common-mt" @click="emitChange">emit change</button>
</view>
</template>
<script setup>
const emit = defineEmits<{
// 具名元组语法
change : [id: number]
}>()
const emitChange = () => {
emit('change', 3)
}
</script>
\ No newline at end of file
......@@ -50,7 +50,7 @@
{
name: 'defineEmits',
url: 'define-emits',
enable: false,
enable: true,
},
{
name: 'defineExpose',
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册