时间戳

首页 > 解决方案 > 为什么 Vue 将未指定的布尔道具视为错误？

javascript - 为什么 Vue 将未指定的布尔道具视为错误？

问题描述

请看这个例子

如果我有这样的组件：

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

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

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

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

这将输出false而不是undefined?

这是为什么？

无论如何我可以检测到人们是否没有指定道具，所以我可以使用 lodash_.isBoolean来检测它吗？

目前，我知道的唯一方法是将默认值手动设置为undefined.

标签： javascriptvue.js

解决方案

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

你可以this.$options.propsData在你的组件内部。如果 prop 存在于此，则用户已明确设置它；默认值未显示。

推荐阅读