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