javascript - 为什么 Vue 将未指定的 bool props 视为 false？

Question

请参阅此示例

如果我有一个这样的组件:

<template>
  <div v-if="on">
    Hello
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    on: Boolean
  },
  mounted() {
    console.log(this.on)
  }
};
</script>

然后我渲染该组件并在 Prop 上指定任何内容

<template>
  <div >
    <HelloWorld/>
  </div>
</template>

这将输出 false 而不是 undefined？

这是为什么？

无论如何，我是否可以检测人们是否没有指定该 Prop ，以便我可以使用 lodash _.isBoolean 来检测它？

目前，我知道的唯一方法是手动将默认值设置为未定义。

Answer 1

您可以为其设置默认值，并检查该值是否仍然相同，然后用户没有传递 Prop ，但在某些情况下您无法真正将您的值与其默认值进行比较，例如prop 是一个函数。

您可以在组件中包含 this.$options.propsData 。如果此处存在该 prop，则表明用户已明确设置它；默认值未显示在。