为什么将空字符串传递给Vue组件布尔型道具被认为是正确的？

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>

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

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这样设计。

Answer 1

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

They wrote it in their documentation