typescript Vue3组件提案A或B，不是两者，也不是两者都不是

9gm1akwq 于 2023-05-19 发布在 TypeScript

关注(0)|答案(1)|浏览(147)

我有一个显示文本和图像或彩色圆圈的组件，如下所示：

当前组件的props看起来像这样：

<script lang="ts" setup>
    // Props
    interface Props {
        title: string 
        imagePath?: string   # String path to an image asset
        color?: `#${string}` # String starting with a Hash, such as #16A2B0
    }
    const props = defineProps<Props>()

[...]

</script>

当使用带有颜色的组件时，它看起来像这样：

<MyComponent color="#DEDEDE"/>

当使用带有图像路径的组件时，它看起来像这样：

<MyComponent image-path="src/assets/image.png" />

现在，我有它，所以color prop和imagePath prop都是可选的，因为从来没有一种情况下，你会需要两个。然而，这允许用户也不提供任何内容，这也是不期望的。

有没有一种方法可以在Typescript中使用Vue 3 Composition API，我可以指定对于这个组件，你需要一个color prop或一个imagePath prop，你不需要两者，只有一个或另一个，你不能两者都有？

typescript

来源：https://stackoverflow.com/questions/76263709/vue3-component-prop-a-or-b-not-both-not-neither

1条答案

按热度按时间

wmtdaxz31#

Vuejs为每个prop提供了一个自定义验证器。但不幸的是，它缺乏访问验证器中其他 prop 的能力。你可以看到the issue here。
所以恐怕没有直接的方法来解决你的问题。但有两种解决方法可供选择：
1.创建一个监视器来监视你的 prop ，如果不满足条件就抛出警告

watch(
  props,
  () => {
    if (!props.imagePath && !props.color) {
      console.warn('Required at least imagePath or color as the props')
    }
  },
  { immediate: true }
)

1.将你的props作为一个单独的对象传递，然后你可以在一个验证器上验证整个props

interface Props {
  title: string
  imagePath?: string
  color?: `#${string}`
}
defineProps({
  props: {
    type: Object as PropType<Props>,
    required: true,
    validator: (propsValue: Props) => {
      if (!propsValue.imagePath && !propsValue.color) {
        console.warn('Required at least imagePath or color as the props')
      }
      return false
    },
  },
})

赞(0）回复(0）举报 2023-05-19

我来回答

typescript Vue3组件提案A或B，不是两者，也不是两者都不是

1条答案

相关问题

热门标签

最新问答