使用VSelect组件clearable属性时的类型校验问题及传参疑问

问题原因 #

Vuetify 的 <v-select> 组件中，clearable 是布尔型开关属性：

• 仅写属性名（<v-select clearable>）时，等同于传递布尔值 true；
• 若用 v-bind 绑定（:clearable="xxx"），必须确保绑定值是原生布尔类型（true/false），而非字符串（"true"/"false"），否则会触发类型校验错误。

你遇到的报错，本质是传递给 <v-select> 的 clearable 值为字符串类型，不符合预期的布尔类型要求。

正确传递方式 #

1. 父组件向子组件传值

确保传递的是布尔类型的 true/false：

• 静态传递 true：直接写属性名，无需 v-bind

<v-row>
  <v-col>
    <Selector clearable />
  </v-col>
</v-row>

• 动态传递（绑定变量）：用 v-bind 绑定布尔类型变量

<script setup>
const isClearable = true; // 声明布尔类型变量
</script>

<template>
  <v-row>
    <v-col>
      <Selector :clearable="isClearable" />
    </v-col>
  </v-row>
</template>

2. 子组件接收并传递给 <v-select>

保持现有 props 定义，直接绑定即可：

<template>
  <v-select :clearable="clearable" />
</template>

<script setup>
const props = defineProps({
  clearable: {
    type: Boolean,
    default: false,
  },
});
</script>

3. 传递 false 的正确姿势

如果需要传递 false，两种方式可选：

• 不传递 clearable 属性（依赖子组件 props 的默认值 false）；
• 显式绑定布尔 false：

<Selector :clearable="false" />

此时子组件传递给 <v-select> 后，清除图标会正确隐藏。

关键注意点 #

• 禁止传递字符串值：比如 clearable="true"（无冒号）或 :clearable="'true'"，这两种写法都会传递字符串 "true"，触发类型错误；
• <v-select clearable/> 不报错的原因：这是 HTML 原生布尔属性语法，存在即表示 true，Vuetify 内部会自动解析为布尔类型，因此不会触发校验错误。

内容的提问来源于stack exchange，提问作者YUN0814