Boolean Properties

同学们，今天咱们来聊聊 Lightning Web Components 里面一个看似简单却很容易踩坑的知识点：布尔属性。 首先，布尔属性是啥呢？就跟咱们在标准 HTML 里经常见的 disabled、checked 一样。你有没有写过 ``？只要这个 disabled 一出现，输入框就禁用，不写就是可用的。LWC 里自定义组件的布尔属性完全遵循这一套规则：属性出现在标签上，就代表 true；不出现，就代表 false。注意啊，这里的关键在于“出现”还是“不出现”，跟等号后面写的啥值没关系。 那为什么要有这个规则呢？因为它能让我们很自然地设定默认状态。在组件的 JavaScript 文件里，定义布尔属性时，默认值一定要设成 false。比如 `@api show = false;`，这样如果父组件没传这个属性，子组件就按 false 处理，也就是不展示。这非常符合直觉，默认就是“假”嘛。 接下来，咱们得重点避坑——很多开发者以为在标签上写 `show="false"` 就能把属性关掉，这就错了。在静态标记里，不管你写 `show="true"` 还是 `show="false"`，甚至 `show=""`，只要这个属性写在了标签上，它就会被解析成 true。为啥呢？因为 LWC 跟标准 HTML 一样，只检查属性是否存在，不读它的字符串值。你给它一个 "false"，引擎可不会自动帮你转成布尔假，它只看有没有这个属性。所以，想用静态方式传一个 false，唯一的办法就是把这个属性删掉，别写它。 那如果我们需要在运行时动态切换布尔值呢？这时候就要靠模板表达式了。比如 ``，这里的 isVisible 是父组件里的一个布尔变量。当 isVisible 是 false 的时候，LWC 压根就不会把 show 属性渲染到 DOM 上，既然不存在，子组件收到的自然就是 false。所以动态绑定才是控制真假的好办法。 总结一下，记住两点：第一，在组件里声明布尔属性，默认值一定设成 false；第二，想设置成 false，要么不传这个属性，要么通过动态绑定一个值为 false 的变量，千万别用 `属性名="false"` 这样的静态写法。把这两点搞懂了，布尔属性这块你就不会再被坑了。 好了，关于布尔属性的规则和陷阱，咱们就先讲到这儿。下个小节继续。