Vue3选项式API中基于Prop的条件类绑定失效求助

核心错误 #

你在App.vue中传递布尔类型Prop时，使用了字符串字面量（"false"、"true"），而Vue会将任何非空字符串解析为布尔值true——哪怕是字符串"false"，也会被判定为真值，所以无论你传哪个，组件里的DARK_MODE都会是true，导致dark类始终被添加。

修复方案 #

传递布尔类型的Prop必须使用v-bind（缩写为:），这样才能把JavaScript的布尔值传给组件，而不是字符串：

修改后的App.vue代码 #

<script>
import Logo2 from './components/Logo2.vue'
export default {
  name:"App",
  components: {
    Logo2
  }
}
</script>

<template>
  <!-- 用v-bind传递布尔false -->
  <Logo2 :DARK_MODE="false"></Logo2>
  <!-- 用v-bind传递布尔true，或者直接写DARK_MODE（仅适用于true的情况） -->
  <Logo2 :DARK_MODE="true"></Logo2>
  <!-- 等价写法：<Logo2 DARK_MODE></Logo2> -->
</template>

验证 #

修改后，第一个组件的DARK_MODE会是布尔false，不会添加dark类；第二个组件的DARK_MODE是布尔true，会添加dark类，完全符合预期。

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