将参数 props 限制在一个类型的列表中_defineprops 限制类型-优快云博客

本文链接：https://blog.youkuaiyun.com/Android062005/article/details/128431870

本文介绍如何在Vue组件中使用validator属性来确保props参数`imgStyle`的值仅限于预定义的集合，例如`'round'`和`'square'`。通过设置validator，当用户传入无效值时，组件会发出警告，帮助开发者快速定位问题。这种做法在封装高质量组件时非常有用，类似于ElementUI或Antd UI库中对Button组件类型的验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这节课，我们来看下，怎样将一个 props 限制在一个特定值的集合中。

现在我们有一个 Image 组件，内容如下：

<template><imgclass="image":class="computeImgStyle"src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2Fv2-9cd5b6a8a9a4882925a3fbb7d724c610_1200x500.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671460510&t=1439c0f17c7afc467b9798f0466cdbda"alt="图片加载失败"/>
</template>

<script setup lang="ts"> const props = defineProps({imgStyle: {type: String,default: 'square'}});const computeImgStyle = computed(() => {return {square: props.imgStyle === 'square',rounded: props.imgStyle === 'rounded'};}); </script>

<style scoped lang="scss"> .image {margin: 100px;width: 70%;}.square {border-radius: 0;}.rounded {border-radius: 20px;} </style>

Image 组件接受一个 imgStyle 参数，然后，我们利用计算属性根据传入的 imgStyle 参数给组件里的图片添加圆角圆角样式，缺省值是没有圆角属性，当传入的值为 rounded ,就给图片添加一个 20px 的圆角，在父组件中这样引入：

<template><Image imgStyle="square" />
</template>

<script setup lang="ts"> import Image from 'Components/Image.vue'; </script>

<style scoped></style>

运行：

这会有一个小问题，当用户传入非 square、rounded 的时候，图片的圆角是没有变化的，或者对应的单词拼写错误，也是没有效果。如果用户以为此时传入的值是对的，就会有疑问，咋没有效果呢？控制台也没有报错，这样还需要时间去排查错误。

所以，当用户传入是错误的值时，我们封装的组件能够给出提示就很有必要了，\那怎么判断用户传入的值是否在我们的约定中呢？

这时，就可以借助 validator 属性，改写下 Image 的代码，如下：

const props = defineProps({imgStyle: {type: String,default: 'square',validator: (value: any) => {return ['square', 'rounded'].includes(value);}}});

validator 属性接受一个参数，这个参数就是我们从父组件传进来的值，这里使用 includes 来判断，传入进来的值是否在我们的数组内，如果是则返回 true ,否则返回 false ,此时控制台就会给出警告。

比如在父组件中，随便传入一个值：

<template><Image imgStyle="123123" />
</template>

在控制台可以看见此警告：

有了警告，用户就能快速定义到问题所在了。

validator 的验证，如果翻看 elementUI 或 Antd UI库，如 Button组件，它有几种类型像 success、info、danger等等。它里面也有用到 validator 的验证器，所以想要封装更好的组件，这个 validator 是必不可少的。

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享