提交 292882e9 编写于 作者: 辛宝Otto's avatar 辛宝Otto 🥊

wip: 测试 uts 传递 prop 和 emit 时候的数据类型

上级 b7d18b57
<template> <template>
<view> <view>
<call-easy-method-uni-modules ref="callEasyMethod1"></call-easy-method-uni-modules> <call-easy-method-uni-modules ref="callEasyMethod1" :list="propsList"
@propsChanged="onPropsChanged"></call-easy-method-uni-modules>
</view> </view>
</template> </template>
<script setup lang="uts"> <script setup lang="uts">
import { testInOtherFile } from './call-method-easycom-uni-modules' import { testInOtherFile } from './call-method-easycom-uni-modules'
import { ref, isProxy, isRef } from 'vue'
const delay = (): Promise<string> => const delay = () : Promise<string> =>
new Promise((resolve, _) => { new Promise((resolve, _) => {
setTimeout(() => { setTimeout(() => {
resolve('') resolve('')
}, 1000) }, 1000)
}) })
const callEasyMethod1 = ref<CallEasyMethodUniModulesComponentPublicInstance | null>(null) const callEasyMethod1 = ref<CallEasyMethodUniModulesComponentPublicInstance | null>(null)
const callMethod1 = () => { const isWatched = ref(false)
// 调用组件的 foo1 方法 const changeTimes = ref(0)
callEasyMethod1.value?.foo1?.() const propsList = ref<number[]>([])
}
const callMethod2 = () => { const callMethod1 = () => {
// 调用组件的 foo2 方法并传递 1个参数 // 调用组件的 foo1 方法
callEasyMethod1.value?.foo2?.(Date.now()) callEasyMethod1.value?.foo1?.()
} }
const callMethod3 = () => { const callMethod2 = () => {
// 调用组件的 foo3 方法并传递 2个参数 // 调用组件的 foo2 方法并传递 1个参数
callEasyMethod1.value?.foo3?.(Date.now(), Date.now()) callEasyMethod1.value?.foo2?.(Date.now())
} }
const callMethod4 = () => { const callMethod3 = () => {
// 调用组件的 foo4 方法并传递 callback // 调用组件的 foo3 方法并传递 2个参数
callEasyMethod1.value?.foo4?.(() => { callEasyMethod1.value?.foo3?.(Date.now(), Date.now())
console.log('callback') }
}) const callMethod4 = () => {
} // 调用组件的 foo4 方法并传递 callback
const callMethod5 = () => { callEasyMethod1.value?.foo4?.(() => {
// 注意: 返回值可能为 null,当前例子一定不为空,所以加了 ! console.log('callback')
const result = callEasyMethod1.value?.foo5?.('string5') as string })
console.log(result) // string1 }
} const callMethod5 = () => {
const callMethodTest = (text: string): string | null => { // 注意: 返回值可能为 null,当前例子一定不为空,所以加了 !
const result = callEasyMethod1.value?.foo5?.(text) as string const result = callEasyMethod1.value?.foo5?.('string5') as string
return result console.log(result) // string1
} }
const callMethodInOtherFile = (text: string): string => { const callMethodTest = (text : string) : string | null => {
return testInOtherFile(callEasyMethod1.value!, text) const result = callEasyMethod1.value?.foo5?.(text) as string
} return result
}
const callMethodInOtherFile = (text : string) : string => {
return testInOtherFile(callEasyMethod1.value!, text)
}
const call = async (): Promise<void> => { const onPropsChanged = (val : number[]) => {
callMethod1() changeTimes.value = changeTimes.value + 1
await delay() isWatched.value = isReactive(val) || isProxy(val) || isRef(val)
callMethod2() console.log(55, isReactive(val), isProxy(val), isRef(val))
await delay() }
callMethod3()
await delay()
callMethod4()
await delay()
callMethod5()
}
onReady(() => { const call = async () : Promise<void> => {
call() callMethod1()
}) await delay()
callMethod2()
await delay()
callMethod3()
await delay()
callMethod4()
await delay()
callMethod5()
await delay()
// 改变 props 观察 props 返回值为非响应式值
propsList.value = [3, 2, 1]
}
defineExpose({ onReady(() => {
callMethodTest, call()
callMethodInOtherFile })
})
</script> defineExpose({
\ No newline at end of file callMethodTest,
callMethodInOtherFile
})
</script>
<template> <template>
<view> <view>
<call-easy-method-uni-modules ref="callEasyMethod1"></call-easy-method-uni-modules> <call-easy-method-uni-modules ref="callEasyMethod1" :list="propsList"
@propsChanged="onPropsChanged"></call-easy-method-uni-modules>
</view> </view>
</template> </template>
<script lang="uts"> <script lang="uts">
import { testInOtherFile } from './call-method-easycom-uni-modules' import { testInOtherFile } from './call-method-easycom-uni-modules'
import { isProxy, isRef, isReactive } from 'vue'
const delay = (): Promise<string> => const delay = () : Promise<string> =>
new Promise((resolve, _) => { new Promise((resolve, _) => {
setTimeout(() => { setTimeout(() => {
resolve('') resolve('')
}, 1000) }, 1000)
}) })
export default { export default {
data() { data() {
return { return {
callEasyMethod1: null as CallEasyMethodUniModulesComponentPublicInstance | null callEasyMethod1: null as CallEasyMethodUniModulesComponentPublicInstance | null,
} isWatched: false,
}, changeTimes: 0,
onReady() { propsList: [] as number[]
// 通过组件 ref 属性获取组件实例, 组件标签名首字母大写,驼峰+ComponentPublicInstance }
this.callEasyMethod1 = this.$refs['callEasyMethod1'] as CallEasyMethodUniModulesComponentPublicInstance
this.call()
},
methods: {
async call(): Promise<void> {
this.callMethod1()
await delay()
this.callMethod2()
await delay()
this.callMethod3()
await delay()
this.callMethod4()
await delay()
this.callMethod5()
},
callMethod1() {
// 调用组件的 foo1 方法
this.callEasyMethod1?.foo1?.()
},
callMethod2() {
// 调用组件的 foo2 方法并传递 1个参数
this.callEasyMethod1?.foo2?.(Date.now())
},
callMethod3() {
// 调用组件的 foo3 方法并传递 2个参数
this.callEasyMethod1?.foo3?.(Date.now(), Date.now())
}, },
callMethod4() { onReady() {
// 调用组件的 foo4 方法并传递 callback // 通过组件 ref 属性获取组件实例, 组件标签名首字母大写,驼峰+ComponentPublicInstance
this.callEasyMethod1?.foo4?.(() => { this.callEasyMethod1 = this.$refs['callEasyMethod1'] as CallEasyMethodUniModulesComponentPublicInstance
console.log('callback')
}) this.call()
},
callMethod5() {
// 注意: 返回值可能为 null,当前例子一定不为空,所以加了 !
const result = this.callEasyMethod1?.foo5?.('string5') as string
console.log(result) // string1
},
callMethodTest(text: string): string | null {
const result = this.callEasyMethod1?.foo5?.(text) as string
return result
}, },
callMethodInOtherFile(text: string): string { methods: {
return testInOtherFile(this.callEasyMethod1!, text) async call() : Promise<void> {
this.callMethod1()
await delay()
this.callMethod2()
await delay()
this.callMethod3()
await delay()
this.callMethod4()
await delay()
this.callMethod5()
await delay()
// 改变 props 观察 props 返回值为非响应式值
this.propsList = [3, 2, 1]
},
callMethod1() {
// 调用组件的 foo1 方法
this.callEasyMethod1?.foo1?.()
},
callMethod2() {
// 调用组件的 foo2 方法并传递 1个参数
this.callEasyMethod1?.foo2?.(Date.now())
},
callMethod3() {
// 调用组件的 foo3 方法并传递 2个参数
this.callEasyMethod1?.foo3?.(Date.now(), Date.now())
},
callMethod4() {
// 调用组件的 foo4 方法并传递 callback
this.callEasyMethod1?.foo4?.(() => {
console.log('callback')
})
},
callMethod5() {
// 注意: 返回值可能为 null,当前例子一定不为空,所以加了 !
const result = this.callEasyMethod1?.foo5?.('string5') as string
console.log(result) // string1
},
callMethodTest(text : string) : string | null {
const result = this.callEasyMethod1?.foo5?.(text) as string
return result
},
callMethodInOtherFile(text : string) : string {
return testInOtherFile(this.callEasyMethod1!, text)
},
onPropsChanged(val : number[]) {
this.changeTimes = this.changeTimes + 1
this.isWatched = isReactive(val) || isProxy(val) || isRef(val)
console.log(55, isReactive(val), isProxy(val), isRef(val))
}
} }
} }
} </script>
</script>
\ No newline at end of file
...@@ -4,11 +4,27 @@ ...@@ -4,11 +4,27 @@
<script> <script>
export default { export default {
props: {
list: {
type: Array as PropType < number[] > ,
default: () => [] as number[]
}
},
data() { data() {
return { return {
result: '' result: ''
} }
}, },
emits:['propsChanged'],
watch: {
list: {
handler(newVal, oldVal) {
console.log('isProxy',isProxy(newVal),'isReactive',isReactive(newVal),'isRef',isRef(newVal))
this.$emit('propsChanged', newVal)
},
immediate: true
}
},
methods: { methods: {
foo1() { foo1() {
this.result = "foo1" this.result = "foo1"
...@@ -28,4 +44,4 @@ ...@@ -28,4 +44,4 @@
} }
} }
} }
</script> </script>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册