Prop验证

# 题目:

首先看到题目这里的描述，大意是一个 button 组件我们要设计使它只接收固定几个值的 prop，并且它的默认值为 default。这就是我们要完成的目标。

# 分析:

props

首先我们来回顾一下，什么是 props，看到官方原话说的是一个组件需要显式去声明它接受那些 props，这样才知道外部传进来的是什么。通俗易懂地说也就是声明这个组件有哪些需要传进来的参数吧。但是我们这里需要做的是 props 的验证，也就是要加一些规则来使得只能传特定的一些值，那么要怎么做呢？

props校验

让我们来看到 props 校验这个章节这里，我们可以 defineProps()宏中提供一个校验函数来解决这个问题。

# 解决：

<script setup>
defineProps({
  type: {
    type: String,
    required: true,
    default: "default",
    validator: (value) => {
      return ["primary", "ghost", "dashed", "link", "text", "default"].includes(
        value
      );
    },
  },
});
</script>

<template>
  <button>Button</button>
</template>

可以看到这里我们定义了一个 type 参数，它的类型是字符串，必填，默认值是 default，并且根据 validator 去判断这个 value 是否符合我们自定义数组里的值。现在就可以在 Button 组件去尝试这个类型啦，发现只要输入的是符合要求的 type 类型就显示正常，否则就会抛出错误。

props错误 props正常

← 大写可写的计算属性→