Vuetify 覆盖默认道具值

Posted 2023-02-23

【中文标题】Vuetify 覆盖默认道具值

【英文标题】：Vuetify override default prop value

【发布时间】：2020-06-07 05:42:27

【问题描述】：

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

【问题讨论】：

有什么理由不创建自定义组件？

@Txema 无法编辑包含太多文件和代码的当前项目。找到所有 v-btn 组件并用另一个组件替换它们。在开始使用 vuetify 之前设置一些默认值也会很好。使代码体积更小

同样的问题，我希望我的所有输入字段默认都具有“填充”和“持久提示”属性，而不是必须为每个实例添加它。而且我更愿意这样做而不必再次制作自定义组件

【参考方案1】：

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

【讨论】：

他不想在每个声明上都写上“概述”属性，而是尽可能在应用程序配置中写下。如果有解决方案，我很感兴趣

对不起，我误会了。如果是这样，我能想到的最好的方法是定义一个组件并设置所有需要的样式，然后在需要使用的地方继承这个组件。

【参考方案2】：

我能够在我的应用程序入口点的顶部（在创建任何 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 patchedvue 库也是：

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;

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

【讨论】：

是的，最好的默认方法是创建一个自定义包装器组件，用于覆盖 props 的默认值