javascript - 为什么将空字符串传递给 Vue 组件 bool Prop 被认为是真实的？

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>

它将渲染出该字符串!

为什么会这样？

一个空字符串被认为是 falsy 但在 Vue 组件中是 truthy，这很奇怪。

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

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

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

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

Answer 1

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

They wrote it in their documentation