无价值的Vue组件道具

小胖LEY西门2020-03-13

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

<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/

小胖LEY西门2020/03/13 15:38:58

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

props: {
    primary: Boolean
}

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

工作的JSFiddle：https ://jsfiddle.net/LukaszWiktor/gfa7gkdb/

Newest Answer