没有价值的 Vue 组件道具

Question

我想在我的组件上设置一个没有任何值的属性。例如：

<my-button primary>Save</my-button>

我在组件的 props 中声明 primary：

Vue.component("my-button", {
  props: ["primary"],
  template: "<button v-bind:class='{primary: primary}'><slot></slot></button>"
})

不幸的是，它不起作用。 primary 属性为 undefined 而 class 未应用。

Answer 1

关键是将道具的类型声明为Boolean:

props: {
    primary: Boolean
}

然后仅指定属性名称使其值设置为 true。

Vue component props without value