在typescript中提取Vue composition API中单独模块的props

Question

我正试图将一些旧代码从Vue选项API + JS移植到Vue组合API + TS，我有以下mixin:

export default {
props: {
time: {
default: 1,
type: String | Number,
},
iterations: {
default: 1,
type: String | Number,
},
},
data: () => ({
animation: '',
}),
methods: {
animate() {
this.animation = `move ${this.time}s ease-in-out ${this.iterations} forwards`
},
},
}

现在我有一些麻烦，找到正确的方式来输入道具，而在同一时间保留默认值和反应性。在这个例子中，默认值丢失了:

export default (props: {
time: string | number
iterations: string | number
}) => {
const animation = ref('')
const animate = () => {
animation.value = `move ${props.time}s ease-in-out ${props.iterations} forwards`
}
return {
animation,
animate,
}
}

而这里我失去了反应性，因为我解构了props参数:

export default ({
time = 1,
iterations = 1,
}: {
time: string | number
iterations: string | number
}) => {
const animation = ref('')
const animate = () => {
animation.value = `move ${time}s ease-in-out ${iterations} forwards`
}
return {
animation,
animate,
}
}

我怎样才能解决这个问题?

Answer 1

我将采用第二种解决方案，为props对象添加一个导出

export const moduleProps {
time: {
default: 1,
type: [String, Number],
},
iterations: {
default: 1,
type: [String, Number],
},
}

有点多余，但是可以用