Vue-Material-Komponenten in eigene Komponenten erweitern

Question

Ich möchte Vue-Material-Komponenten erweitern, damit ich sie in meinem Projekt abstrahieren kann; z.B. Habe eine Icon-Komponente namens "my-icon" und es würde einfach die md-icon-Komponente erben/erweitern. Also in meinem Projekt könnte ich verwenden und es würde einfach md-icon verwenden.

Ich versuchte MyIcon/index.js mit zu erstellen:

import VueMaterial from 'vue-material'; 

export default function install(Vue) {  
    Vue.component('my-icon', Vue.extend(VueMaterial.mdIcon)); 
} 

Und bekam den Fehler:

[Vue warn]: Failed to mount component: template or render function not defined.

Ich möchte wirklich in der Lage sein zu erweitern, diese Komponenten, ohne zu definieren, die Vorlage für jeden, da dies eine Menge Aufwand duplizieren würde. In einer perfekten Welt könnte ich die vorhandenen Vue-Material-Komponenten nehmen, sie umbenennen zu dem, was ich will, und die Fähigkeit haben, die Funktionalität zu erweitern, indem ich die Vorlage auf der Straße überschreibe. Auf diese Weise kann ich die Vue-Material-Komponenten für den Großteil der Arbeit verwenden und bei Bedarf hinzufügen/ersetzen, ohne meine Arbeit upstream zu ändern.

Hat jemand irgendwelche Vorschläge/Gedanken dazu?

Answer 1

Sie erweitern Komponenten, indem Sie sie tatsächlich erneut verwenden.

<template> 
<div class="myCustomIcon"> 
    <md-icon></md-icon> 
</div> 
</template> 
import VueMaterial from 'vue-material'; 

export default{ 
components:{ 
    mdIcon 
} 
}