Vue组件道具没有值

Question

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

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

我在我的组件primary中声明props：

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

不幸的是，它不起作用。 primary属性为undefined，并且未应用该类。

JSFiddle：https://jsfiddle.net/LukaszWiktor/g3jkscna/

Answer 1

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

props: {
    primary: Boolean
}

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

使用JSFiddle：https://jsfiddle.net/LukaszWiktor/gfa7gkdb/