Question

例如，我正在使用vue-numeric。

每次需要时，我总是至少使用此类和属性。

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

在注册组件时是否可以声明某些属性，这样我就不需要在每次需要vue数值时都键入它？

也许还有一天我决定更改类，我只需要在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

创建一个应用默认prop值的功能性包装器组件：

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

您可以在组件的根元素中指定类。并在mounted钩子中应用默认道具。

Answer 3

您可以为组件中的props方法定义默认值，如果您   要覆盖它，必须调用它，否则它具有默认值

您应将以下代码添加到“ vue-数字”组件文件中

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

如何将全局导入的Vue组件设置为具有预设属性？

3 个答案: