Vuetify，如何设置默认道具 [英] Vuetify, how to set default props

问题描述

我已经开始使用 Vuetify，但我正在寻找一种方法来修改某些组件上的默认道具.

有没有办法做到这一点?

即而不是不断地写:

我可以让布局的默认属性为 wrap 吗?

解决方案

一些类似的东西，但请注意，如果你是 vue.js 的新手，你必须阅读一些内容:

相关文档:vue mixin、vue 扩展

js

//一些已经存在的组件，你需要以某种方式获取它//最有可能通过`import `让外部组件 = {道具:{包装:{默认:假，类型:布尔}}，模板:<li>wrap:{{wrap}}</li>"};//这模拟了全局注册Vue.component("v-some-external-component", theExternalComponent);// -  开始吧  -//让我们扩展该组件 - 并覆盖 wrap 的默认 prop让extendedExternalwithOtherDefaults = {扩展:外部组件，mixins: [{ props: { wrap: { default: true } } }],};var app = new Vue({el: "#app",组件:{v-my-customized-component":extendedExternalwithOtherDefaults }});

html(pug 实际上，但这在这里无关紧要)

div(id="app")超v-some-external-componentv-some-external-component(wrap)v-我的定制组件//现在默认为 wrap:truev-my-customized-component(:wrap="false")//如果需要，您仍然可以将 wrap 设置为 false

输出

wrap:false包装:真包装:真包装:假

codepen:https://codepen.io/anon/pen/MLxbEW

I have started using Vuetify, but I am looking for a way to modify the default props on some components.

Is there a way to do this?

i.e. Instead of constantly having to write:

<v-layout wrap></v-layout>

Can I make layouts default prop for wrap be true?

解决方案

something along these lines, but beware if you are new to vue.js you'll have to do some reading:

relevant doc: vue mixin, vue extends

js

// some already existing component, you need to get it somehow
// most likely via `import <something-to-import>`
let theExternalComponent = {
  props: { wrap: { default: false, type: Boolean } },
  template: "<li>wrap:{{wrap}}</li>"
};
// this simulates the global registration
Vue.component("v-some-external-component", theExternalComponent);

// -- lets start --

// lets extend that component - and overwrite the default prop for wrap
let extendedExternalwithOtherDefaults = {
  extends: theExternalComponent,
  mixins: [{ props: { wrap: { default: true } } }],
};

var app = new Vue({
  el: "#app",
  components: { "v-my-customized-component": extendedExternalwithOtherDefaults }
});

html (pug actually but that does not matter here)

div(id="app")
  ul
    v-some-external-component

    v-some-external-component(wrap)

    v-my-customized-component
    // now defaults to wrap:true

    v-my-customized-component(:wrap="false") 
    // you can still set the wrap to false if required

output

wrap:false
wrap:true
wrap:true
wrap:false

codepen: https://codepen.io/anon/pen/MLxbEW

这篇关于Vuetify，如何设置默认道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！