javascript - 将 bool 属性传递给 Vue 组件的简写

Question

在组件的 Vue 文档中说:

Including the prop with no value will imply 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
  }
});

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

Answer 1

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

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

这使它正常工作