Как установить компонент Vue, который импортируется глобально, чтобы иметь предустановленные атрибуты?

Question

Например, я использую vue-numeric .

Каждый раз, когда мне это нужно, я всегда использую хотя бы эти классы и атрибуты.

<vue-numeric
   class="form-control border-input text-right"
   :separator="."
   :minus=false
/>

Можно ли объявить некоторые атрибуты при регистрации компонента, чтобы мне не приходилось вводить его каждый раз, когда мне нужно vue-numeric?

А также, возможно, однажды я решил изменить класс, мне просто нужно изменить его в 1 файле, например, в main.js. Я не хочу менять его на node_modules.

Я бы хотел сделать что-то подобное.

Vue.component('vue-numeric', VueNumeric, {
   class:"form-control border-input text-right",
   separator:".",
   minus: false
}

поэтому в шаблоне мне просто нужно добавить некоторые специфические атрибуты.

<vue-numeric v-model="price" :min=0 />

Answer 1

Создайте функциональный компонент-обертку, который применяет значения пропов по умолчанию:

Vue.component('vue-numeric-default', {
  functional: true,
  render(h, ctx) {
    return h('vue-numeric', Object.assign({}, ctx.data, {
      // Apply default class only if no class was defined
      staticClass: ctx.data.class || ctx.data.staticClass
        ? ctx.data.staticClass
        : 'form-control border-input text-right',

      // Apply default props
      props: Object.assign({
        separator: '.',
        minus: false,
      }, ctx.props),
    }), ctx.children);
  },
});

Вы также можете использовать

{ separator: '.', ...ctx.props }

синтаксис вместо

Object.assign({ separator: '.' }, ctx.props)

, если поддерживается.

Answer 2

Вы можете определить значение по умолчанию для методов props в компоненте, и если вы хотите переопределить, его нужно назвать, иначе оно имеет значение по умолчанию,

Вы должны добавить приведенный ниже код в файл компонента "vue-numeric"

props: {
   class: {
      type: String,
      default: 'form-control border-input text-right'
   },
   separator: {
     type: String,
     default: '.'
   }
   minus: {
    type: Boolean,
    default: false
  }
}

Answer 3

Вы можете указать классы в корневом элементе компонента. И применить реквизит по умолчанию в mounted hook.