Question

如何将样式道具（例如Vuetify中<v-btn outlined>My Button</v-btn>中的大纲道具）应用于多个标签，而无需将其设置为每次出现。例如，对于a中的所有出现：

<v-app>
<template>
<v-card>

创建一个可以进行“概述”的CSS类（在这种情况下）显然可以，但是有点违反了道具的目的。

或者，是否可以将默认道具设置在某处，所以不需要声明它们？

Answer 1

// 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

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

在Vuetify中继承道具样式

1 个答案: