Vue组件布尔属性简写失效：按文档操作却无法生效

我来帮你排查这个问题——其实核心原因是Vue自定义组件的布尔属性不会自动把省略值的情况解析为true，除非你在组件的props选项里做了正确的配置。

问题根源 #

Vue对于原生HTML的布尔属性（比如<input type="checkbox" checked>）会遵循浏览器规则，省略值时默认是true，但自定义组件的props是Vue独立的属性系统，它不会自动推断属性类型。如果你没有显式声明visible是Boolean类型，Vue会把它当作普通字符串属性处理，值为空字符串""——而空字符串在Vue模板渲染的布尔上下文里属于假值，所以你会看到visible显示为false。

解决方案：正确声明props的类型和默认值 #

你只需要在TestComponent的定义中，把visible（以及其他布尔类型的props）声明为Boolean类型，并设置合适的默认值即可。这样Vue会识别这是一个布尔属性，当父组件只写属性名（比如<test-component visible></test-component>）时，会自动把它的值设为true。

完整的示例代码如下：

<div id="app">
  <test-component visible></test-component>
</div>

<template id="template">
  <span>open: {{ open }}; visible: {{ visible }}</span>
</template>

<script>
const TestComponent = Vue.extend({
  template: '#template',
  props: {
    visible: {
      type: Boolean,
      default: false // 当父组件未传入visible时，使用此默认值
    },
    open: {
      type: Boolean,
      default: false
    }
  }
})

new Vue({
  el: '#app',
  components: {
    TestComponent
  }
})
</script>

额外注意点 #

• 当声明了type: Boolean后：
  • 父组件写<test-component visible></test-component>，visible的值为true
  • 父组件未写visible属性，visible的值为你设置的default: false
  • 如果要传递false，不能直接写<test-component visible="false"></test-component>（因为字符串"false"会被Vue解析为真值true），必须用绑定语法：<test-component :visible="false"></test-component>

这样配置后，你就能看到visible正确显示为true了。

内容的提问来源于stack exchange，提问作者kshep92