我已经开始使用Vuetify,但我正在寻找一种方法来修改某些组件的默认道具。
有没有办法做到这一点?
即不必经常写:
<v-layout wrap></v-layout>
我可以使布局默认支持包装为真吗?
这些方面的东西,但要注意,如果你是vue.js的新手,你将不得不做一些阅读:
相关文档: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但这里没关系)
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
产量
wrap:false
wrap:true
wrap:true
wrap:false