Vue.js传递返回布尔值的函数作为Prop出现类型校验警告如何解决

你传递给子组件的是canBeUsed函数本身，而非该函数执行后的布尔返回值，子组件的prop明确声明了类型为Boolean，因此触发了Vue的类型校验警告。当前功能运行正常，是因为你在子组件内使用该prop时手动调用了函数（例如写为canBeUsed()），所以可以拿到正确的布尔结果。

你可以根据实际业务场景选择以下任意一种方案消除警告：

• 方案1：父组件传值时执行函数，直接传递布尔结果
  无需修改子组件的prop定义，只需要在父组件绑定prop时执行函数拿到返回值即可：

<!-- 父组件调用子组件的位置 -->
<YourChildComponent :canBeUsed="canBeUsed()" />

该方案适合判断逻辑仅需要在父组件传值时执行一次的场景。

• 方案2：修改子组件prop类型为Function
  如果你需要子组件自行控制判断逻辑的执行时机（例如子组件内部状态更新后重新校验、需要给判断函数传递自定义参数），可以调整子组件的prop类型声明：

// 子组件props定义
props: {
  canBeUsed: {
    type: Function
  }
}

子组件使用时调用函数即可获取布尔结果：const usableStatus = this.canBeUsed()

• 方案3：将父组件的canBeUsed方法改写为计算属性
  你的判断逻辑仅依赖响应式变量this.usable，改成计算属性更符合Vue最佳实践，自带响应式缓存，性能更好，传值时也不需要额外加括号执行：

// 父组件逻辑，替换原来的canBeUsed方法
computed: {
  canBeUsed() {
    // 原逻辑可直接简化，无需写if判断
    return this.usable
  }
}

<!-- 父组件传值写法 -->
<YourChildComponent :canBeUsed="canBeUsed" />

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