Skip to content

H
hello-uvue

DCloud / hello-uvue

通知 350
Star 2
Fork 7
H
hello-uvue
提交 d8c545e7 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

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

上级 eb04572b
隐藏空白更改
内联 并排
Showing with 89 addition and 136 deletion
pages/component-instance/props/Foo.uvue 0 → 100644
浏览文件 @ d8c545e7
<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
pages/component-instance/props/check-type.uvue
浏览文件 @ d8c545e7
<template>
<view class="component">
<view class="row">
<text>string: </text><text class="string">{{str}}</text>
</view>
<view class="row">
<text>num: </text><text class="number">{{num}}</text>
</view>
<view class="row">
<text>bool: </text><text class="boolean">{{bool}}</text>
</view>
<view class="row">
<text>ArrayString: </text>
<text class="array-string" v-for="str in arrayString">{{str}}</text>
</view>
<view class="row">
<text>obj.count: </text>
<text class="object">{{obj.count}}</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>
import { type PropType } from 'vue'
export type CusomObject = { count : number }
export default {
props: {
str: {
type: String,
default: 'default value'
},
num: {
type: Number,
default: 0
},
bool: {
type: Boolean,
default: false
},
arrayString: {
type: Array as PropType<string[]>,
default: () : Array<string> => {
return []
}
},
obj: {
type: Object as PropType<CusomObject>,
default: () : CusomObject => ({ count: 0 } as CusomObject)
},
// date: {
// 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
<template>
<view class="component">
<view class="row">
<text>string: </text><text class="string">{{str}}</text>
</view>
<view class="row">
<text>num: </text><text class="number">{{num}}</text>
</view>
<view class="row">
<text>bool: </text><text class="boolean">{{bool}}</text>
</view>
<view class="row">
<text>ArrayString: </text>
<text class="array-string" v-for="str in arrayString">{{str}}</text>
</view>
<view class="row">
<text>obj.count: </text>
<text class="object">{{obj.count}}</text>
</view>
<view class="row">
<text id="check-type-arr">arr: {{arr}}</text>
</view>
</view>
</template>
<script>
import { type PropType } from 'vue'
export type CusomObject = { count : number }
export default {
props: {
str: {
type: String,
default: 'default value'
},
num: {
type: Number,
default: 0
},
bool: {
type: Boolean,
default: false
},
arrayString: {
type: Array as PropType<string[]>,
default: () : Array<string> => {
return []
}
},
obj: {
type: Object as PropType<CusomObject>,
default: () : CusomObject => ({ count: 0 } as CusomObject)
},
arr: {
type: Array as PropType<string[]>,
default: () : Array<string> => {
return ['a', 'b', 'c']
}
}
}
}
</script>
\ No newline at end of file
pages/component-instance/props/props.test.js
浏览文件 @ d8c545e7
......@@ -19,5 +19,10 @@ describe('$props', () => {
expect(await boolean.text()).toBe('true')
expect(await arrayString.text()).toBe('str1')
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]')
})
})
pages/component-instance/props/props.uvue
浏览文件 @ d8c545e7
<template>
<view class="page">
<check-type str="abcd" :num="12345" :bool="true" :obj="obj" :arrayString="arrayString"></check-type>
<!-- <view>简易类型</view>-->
<!-- <simple-->
<!-- str="abcd"-->
<!-- :num="12345"-->
<!-- :bool="true"-->
<!-- ></simple>-->
<Foo />
</view>
</template>
<script>
import checkType, { CusomObject } from "./check-type.uvue";
// import simple from "./simple.uvue";
import Foo from "./Foo.uvue";
export default {
components: {
checkType,
// simple
Foo
},
data() {
return {
......
pages/component-instance/props/simple.uvue 已删除 100644 → 0
浏览文件 @ eb04572b
<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.
先完成此消息的编辑！
想要评论请 注册 或