javascript - Vue.js - 默认情况下应用一个类，除非手动添加一个类？

Question

我刚开始使用 Vue.js，我有点不知道这是否可行。给定以下组件:

<button class="button large primary-gradient">{{ text }}</button>

如果可能的话，我希望“large primary-gradient”类是有条件的，取决于开发人员稍后是否将其他类添加到 HTML 中的按钮组件。

例如，如果开发者写

<custom-button text="hi"></custom-button>

它应该呈现出来

<button class="button large primary-gradient">hi</button>

但是，如果开发人员写道:

<custom-button class="medium secondary" text="hi"></custom-button>

它应该呈现出来

<button class="button medium secondary">hi</button>

本质上，我试图为这个按钮组件创建默认类值，只有在开发人员不添加自己的值时才会使用这些值。在我看来这应该很容易做到，但我对 Vue 的有限了解有点阻碍了我。感谢您的任何见解!

Answer 1

最好使用 Prop 来控制它:

Vue.component('custom-button', {
  props: {
    text: String,
    size: { type: String, default: 'large' },
    type: { type: String, default: 'primary-gradient' }
  },
  computed: {
    classes: function () {
      return ['button', this.size, this.type].join(' ')
    }
  },
  template: '<button v-bind:class="classes">{{ text }}</button>'
})

用法:

<custom-button size="medium" type="secondary" text="Hi"/>