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

Question

我刚开始使用Vue.js，但我想弄清楚这是否可行。 给定以下组件：

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

如果可能的话，我希望基于开发人员是否稍后将其他类添加到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

最好使用道具来控制它：

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