在 VSelect 上使用“Clearable”时的奇怪情况

Question

这是我的组件上可清除属性的预期用途：

1. 在父组件上：

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

2. 在子组件中：

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

const props = defineProps({
  clearable: {
    type: Boolean,
    default: false,
  },
});

虽然我确实在组件上看到了清晰的图标，但控制台不断报告：

[Vue warn]：无效的道具：道具“clearable”的类型检查失败。预期为布尔值，得到值为“true”的字符串。

所以，我尝试直接在子组件中赋值：

<v-select :clearable="true"/>
<v-select :clearable="false"/> <!-- Even with "false", the clear icon still appears -->

但是遇到了同样的错误消息。看来我们只能使用这种方法来避免错误消息：

<v-select clearable/>

但是，如何正确地将clearable作为道具从父组件传递到子组件？

Answer 1

我相信我通过对父组件进行简单的调整解决了这个问题：

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

可清除的定义为：

const clearable = ref(true)