为什么将空字符串传递给被认为是真实的 Vue 组件布尔道具？答案

【问题标题】：Why passing empty string to Vue component Boolean props considered truthy?为什么将空字符串传递给被认为是真实的 Vue 组件布尔道具？
【发布时间】：2020-09-10 23:27:24
【问题描述】：

请看这个最小的例子，我有一个像这样的简单组件

HelloWorld.vue

<template>
  <div v-if="show">I will show even if show prop is passed as empty string</div>
</template>

<script>
  export default {
    props: {
      show: Boolean,
    },
  };
</script>

现在，如果我对那个组件这样做

App.vue

<template>
  <div>
    <HelloWorld :show="show" />
  </div>
</template>

<script>
  import HelloWorld from "./components/HelloWorld";

  export default {
    data() {
      return {
        show: "",
      };
    },
    components: {
      HelloWorld,
    },
  };
</script>

它会渲染出那个字符串！

为什么会这样？

空字符串被认为是虚假的，但在 Vue 组件中却是真实的，这很奇怪。

我可能明白为什么会这样，因为现在你可以这样做了

<template>
  <div>
    <!-- you can just write show -->
    <HelloWorld show />
  </div>
</template>

但是，我认为 template-compiler 应该做这件事，因为看看 JSX

它支持编译器级别的简写，所以我想知道为什么 Vue 会这样设计。

【问题讨论】：

更大的问题，为什么您将变量键入为布尔值但为其分配一个字符串？
这是一个常见的用例，如果你有一个输入类型的文本元素，它的默认值可能是一个空字符串，如果我想在用户填写输入后呈现一些东西，这是一个用例。
那完全不同。您在这里有一个show 变量，您将其键入为布尔值，目的是如果它应该显示则将其设置为true，如果不应该显示则设置为false。将其设置为非布尔值没有意义。
如果你要在元素中存储实际的字符串值，并使用字符串的长度来推导出它的真实状态，那么它应该被输入为字符串而不是布尔值。
如果这真的没有意义，为什么 Vue 没有发出警告？

标签： javascript vue.js

【解决方案1】：

Vuejs 像在 HTML 中一样使用 Boolean props，其中空字符串将被视为 true

They wrote it in their documentation

【讨论】：