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

feat(props): 补充不同组件同名 props default 函数默认值互相影响测试例 #374

上级 eb04572b
<template>
<view class="component">
<text id="foo-arr">arr: {{arr}}</text>
</view>
</template>
<script>
export default {
props: {
arr: {
type: Array as PropType<number[]>,
default: () : Array<number> => {
return [1, 2, 3]
}
}
}
}
</script>
\ No newline at end of file
<template> <template>
<view class="component"> <view class="component">
<view class="row"> <view class="row">
<text>string: </text><text class="string">{{str}}</text> <text>string: </text><text class="string">{{str}}</text>
</view> </view>
<view class="row"> <view class="row">
<text>num: </text><text class="number">{{num}}</text> <text>num: </text><text class="number">{{num}}</text>
</view> </view>
<view class="row"> <view class="row">
<text>bool: </text><text class="boolean">{{bool}}</text> <text>bool: </text><text class="boolean">{{bool}}</text>
</view> </view>
<view class="row"> <view class="row">
<text>ArrayString: </text> <text>ArrayString: </text>
<text class="array-string" v-for="str in arrayString">{{str}}</text> <text class="array-string" v-for="str in arrayString">{{str}}</text>
</view> </view>
<view class="row"> <view class="row">
<text>obj.count: </text> <text>obj.count: </text>
<text class="object">{{obj.count}}</text> <text class="object">{{obj.count}}</text>
</view> </view>
<!-- <view class="row">--> <view class="row">
<!-- <text>obj.key: </text><text>{{obj.key}}</text>--> <text id="check-type-arr">arr: {{arr}}</text>
<!-- </view>--> </view>
<!-- <view class="row">--> </view>
<!-- <text>date timestamp: </text><text>{{date.now()}}</text>--> </template>
<!-- </view>-->
<!-- <view class="row">--> <script>
<!-- <text>function result: </text><text>{{func()}}</text>--> import { type PropType } from 'vue'
<!-- </view>-->
<!-- <view class="row">--> export type CusomObject = { count : number }
<!-- <text>symbol: </text><text>{{symbol}}</text>-->
<!-- </view>--> export default {
</view> props: {
</template> str: {
type: String,
<script> default: 'default value'
import { type PropType } from 'vue' },
num: {
export type CusomObject = { count : number } type: Number,
default: 0
export default { },
props: { bool: {
str: { type: Boolean,
type: String, default: false
default: 'default value' },
}, arrayString: {
num: { type: Array as PropType<string[]>,
type: Number, default: () : Array<string> => {
default: 0 return []
}, }
bool: { },
type: Boolean, obj: {
default: false type: Object as PropType<CusomObject>,
}, default: () : CusomObject => ({ count: 0 } as CusomObject)
arrayString: { },
type: Array as PropType<string[]>, arr: {
default: () : Array<string> => { type: Array as PropType<string[]>,
return [] default: () : Array<string> => {
} return ['a', 'b', 'c']
}, }
obj: { }
type: Object as PropType<CusomObject>, }
default: () : CusomObject => ({ count: 0 } as CusomObject) }
}, </script>
// date: { \ No newline at end of file
// type: Date,
// default: () => {
// return new Date()
// }
// },
// func: {
// type: Function,
// default: () => {
// return () => {}
// }
// },
// symbol: {
// type: Symbol,
// default: Symbol('default')
// },
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
...@@ -19,5 +19,10 @@ describe('$props', () => { ...@@ -19,5 +19,10 @@ describe('$props', () => {
expect(await boolean.text()).toBe('true') expect(await boolean.text()).toBe('true')
expect(await arrayString.text()).toBe('str1') expect(await arrayString.text()).toBe('str1')
expect(await object.text()).toBe('1') expect(await object.text()).toBe('1')
const checkTypeArr = await page.$('#check-type-arr')
expect((await checkTypeArr.text()).replaceAll('\n', '')).toBe('arr: ["a","b","c"]')
const fooArr = await page.$('#foo-arr')
expect((await fooArr.text()).replaceAll('\n', '')).toBe('arr: [1,2,3]')
}) })
}) })
<template> <template>
<view class="page"> <view class="page">
<check-type str="abcd" :num="12345" :bool="true" :obj="obj" :arrayString="arrayString"></check-type> <check-type str="abcd" :num="12345" :bool="true" :obj="obj" :arrayString="arrayString"></check-type>
<!-- <view>简易类型</view>--> <Foo />
<!-- <simple-->
<!-- str="abcd"-->
<!-- :num="12345"-->
<!-- :bool="true"-->
<!-- ></simple>-->
</view> </view>
</template> </template>
<script> <script>
import checkType, { CusomObject } from "./check-type.uvue"; import checkType, { CusomObject } from "./check-type.uvue";
// import simple from "./simple.uvue"; import Foo from "./Foo.uvue";
export default { export default {
components: { components: {
checkType, checkType,
// simple Foo
}, },
data() { data() {
return { return {
......
<template>
<view class="component">
<view class="row">
<text>string: </text><text>{{str}}</text>
</view>
<view class="row">
<text>num: </text><text>{{num}}</text>
</view>
<view class="row">
<text>bool: </text><text>{{bool}}</text>
</view>
<!-- <view class="row">-->
<!-- <text>arr: </text>-->
<!-- [<text v-for="text in arr">{{text}},</text>]-->
<!-- </view>-->
<!-- <view class="row">-->
<!-- <text>obj.key: </text><text>{{obj.key}}</text>-->
<!-- </view>-->
<!-- <view class="row">-->
<!-- <text>obj.key: </text><text>{{obj.key}}</text>-->
<!-- </view>-->
<!-- <view class="row">-->
<!-- <text>date timestamp: </text><text>{{date.now()}}</text>-->
<!-- </view>-->
<!-- <view class="row">-->
<!-- <text>function result: </text><text>{{func()}}</text>-->
<!-- </view>-->
<!-- <view class="row">-->
<!-- <text>symbol: </text><text>{{symbol}}</text>-->
<!-- </view>-->
</view>
</template>
<script>
type IProps = {
str: string
}
export default {
props: ['str', 'num', 'bool'],
}
</script>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册