我最近从Vue2
切换到Vue3
,但我有点困惑,在多个组件之间共享props
的最佳实践是什么。我想让输入组件共享公共props
,如“type”,“name”等。以前我用mixins
做过,但我想知道这是否仍然是最好的方法。
让我给予一个我通过options-api
尝试的例子:
// Home.vue
<template>
<p>Home</p>
<p>{{ type }}</p>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { sharedInputProps } from '../admin/composables/sharedInputProps'
export default defineComponent({
props: {
...sharedInputProps,
},
setup() {
return {
}
},
})
</script>
// sharedInputProps.ts
import { ComponentPropsOptions } from 'vue'
export const sharedInputProps: ComponentPropsOptions = {
type: {
type: String,
required: true,
default: 'text',
}
}
这是可行的,但是我在IDE中没有得到Home.vue
中的props(在本例中是<p>{{ type }}</p>
)的类型提示/自动完成。
这就是我如何使用mixin:
// Home.vue
<template>
<p>Home</p>
<p>{{ type }}</p>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import InputProps from '../admin/mixins/InputProps.vue'
export default defineComponent({
mixins:[
InputProps,
],
setup() {
return {
}
},
})
</script>
// InputProps.vue
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
props: {
type: {
type: String,
required: true,
default: 'text',
}
},
})
</script>
这就像预期的那样工作,它给了我正确的打字提示/自动完成。
但是我想知道如何使用defineProps
方法在composition-api
上完成这一任务。我让它直接在Home.vue
中使用typehinting/autocomplement定义props,如下所示:
// Home.vue
<template>
<p>Home</p>
<p>{{ type }}</p>
</template>
<script setup lang="ts">
import { defineProps, withDefaults } from 'vue'
interface Props {
type?: string
}
const props = withDefaults(defineProps<Props>(), {
type: 'text',
})
</script>
但正如文档(https://vuejs.org/guide/typescript/composition-api.html#typing-component-props)所述,它不能从外部文件加载。
所以我的问题是,既然不支持在composition-api
中使用外部文件(还没有?))和一个外部文件使用options-api
和使用spread
操作符来析构一个对象并没有给出类型提示/自动完成,那么mixins
仍然是共享props的最佳实践吗?或者我在sharedProps.ts
文件(或其他地方)中配置错误?
我运行的是最新版本的Vue 3(3.2.47
),我使用的是最新版本的PHPStorm(2023.1
)作为IDE。
1条答案
按热度按时间9gm1akwq1#
ComponentPropsOptions
类型防止sharedInputProps
被隐式类型化。如果
sharedInputProps
应该与ComponentPropsOptions
类型兼容,则可以在TypeScript 4.9或更高版本中使用satisfies
:当它被用作
props: { ...sharedInputProps }
时,这会保持正确的类型,并且如果它不正确,可以在定义它的地方发现错误。