为什么将空字符串传递给 Vue 组件 Boolean props 被认为是 true？

Question

请参阅这个最小示例，我有一个像这样的简单组件

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>

现在，如果我对该组件执行此操作

应用程序.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>

然而，我认为模板编译器应该做这件事，因为看看 JSX

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

Answer 1

Vuejs 使用布尔属性，如 HTML，其中空字符串将被视为 true

他们在文档中写了它