Question

有什么方法可以更改vuetify组件中prop的默认值？
例如，假设我们有一个像v-btn这样的组件。
这个组件有很多道具，其中一个像outlined，默认值为false。
可以说我想要在我的应用程序中将此默认值永久更改为true。有什么办法吗？

Answer 1

我能够在应用程序入口点的顶部（在创建任何Vue组件之前）做到这一点。

/** 
 * [required imports]
 * (you must somehow import VBtn component separately)
 */

Vue.use(Vuetify);
VBtn.options.props.outlined.default = true;

但是这种做法被称为猴子修补，不鼓励使用，请考虑使用继承。

就我而言，我试图从Vue.options.components['VBtn']到it didn't work来获取组件。

So I monkey patched vue库：

import Vue from "vue";
import Vuetify from 'vuetify'

export const vueComponentsImported: any = {};
export const vueComponentFnDefault = Vue.component.bind(Vue);

/** @see node_modules/vue/src/core/global-api/assets.js */
export const vueComponentFnModded = (id, component) => {
  vueComponentsImported[id] = component;
  return vueComponentFnDefault(id, component);
};

Vue.component = vueComponentFnModded;

Vue.use(Vuetify);

let VBtn = vueComponentsImported['VBtn'];
if (VBtn) {
  VBtn.options.props.outlined.default = true;
}

（如果不起作用，请随时编辑此代码，我的应用程序中有很多行）

Answer 2

这样做没有意义，您可以将'<v-btn'替换为'<v-btn outlined'。

Vuetify覆盖默认道具值

2 个答案: