将布尔道具传递给Vue组件的简写答案

【问题标题】：Short hand to pass boolean props to Vue component将布尔道具传递给Vue组件的简写
【发布时间】：2018-10-05 06:44:40
【问题描述】：

在组件的 Vue 文档中它说：

包含没有值的道具将暗示true： <blog-post favorited></blog-post>

但是，当我在我的组件上尝试它时，它不起作用 (related fiddle)：

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

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

<!-- JS -->
const TestComponent = Vue.extend({
  template: '#template',
  props: ['visible'],
  data: function() {
    return { 'open': true }
  }
});

new Vue({
  el: "#app",
  components: {
    'test-component': TestComponent
  }
});

这是一个错误还是我做错了什么？

【问题讨论】：

标签： javascript vuejs2 vue-component

【解决方案1】：

我也希望它能够按原样工作，但您似乎需要在 props 声明中指定字段的类型：

props: {
    'visible': {
        type: Boolean
    }
}

这使它正常工作

【讨论】：

看起来就是这样。替代符号props: { visible: Boolean } 也可以。谢谢！