Vue3组件间共享props

i1icjdpr  于 2023-05-07  发布在  Vue.js
关注(0)|答案(1)|浏览(195)

我最近从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。

9gm1akwq

9gm1akwq1#

ComponentPropsOptions类型防止sharedInputProps被隐式类型化。
如果sharedInputProps应该与ComponentPropsOptions类型兼容,则可以在TypeScript 4.9或更高版本中使用satisfies

export const sharedInputProps = {
    type: {
        type: String,
        required: true,
        default: 'text',
    }
} satisfies ComponentPropsOptions

当它被用作props: { ...sharedInputProps }时,这会保持正确的类型,并且如果它不正确,可以在定义它的地方发现错误。

相关问题