Vuejs Vorlage Vererbung

Question

Wie kann ich Vorlage Vererbung (Wie was Jade hat, extends file.jade und dann die Blöcke mit dem gleichen Namen würde überschrieben werden)?

Ich weiß, dass ich alles mit Zusammensetzung tun kann, aber für Komponenten wie Fußzeile und Kopfzeile, die auf jeder einzelnen Seite außer einer oder zwei (z. B. Anmeldeseite) erscheinen, muss ich sie auf jede einzelne Komponente schreiben. In meiner App habe ich eine zweistufige Navigation und es scheint schmerzhaft, sie auf jede dieser Kindkomponenten zu wiederholen :(

Ich weiß, dass ich Jade und dann eine Jade-Datei innerhalb meiner Komponenten erben kann, aber es scheint falsch weil ich einige Jade und einige Vue-Dateien haben würde, gibt es eine andere Möglichkeit, dies zu tun?

// Component.vue 

<template lang="jade"> 
    extends ./StandardLayout 
    block content 
    router-view 
</template> 

// StandardLayout.Vue 

<template lang="jade"> 
    div 
    navbar 
    div.container 
     div.spacer 
     div.row 
     block content 
<template> 

Was ich für entschieden haben, wird ein Layout-Ordner mit Jade Layouts gefüllt und ich verwende sie um meine Komponenten zu erweitern.Ich verwendete vue-cli mit webpack template.

Answer 1

In dem allgemeinsten Fall, wenn Sie das gleiche HTML wiederholen müssen, ist eine Option, die Sie verwenden können, <partial> s.

<partial name="header"></partial> 
<div>My content content</div> 
<partial name="footer"></partial> 

Wo Sie partials als

Vue.partial('header', '<h3>This is the title: {{title}}</h3>') 
Vue.partial('footer', '<footer>Mini footer</footer>') 

jedoch erklären, wenn Sie einen Einzel Seite Anwendung die Strategie bauen Sie ist folgen könnte einfach einen Header haben und eine Fußzeile um Ihre <router-view>, hier ist ein Kinderspiel, das zeigt, wie es geht.

https://jsfiddle.net/gurghet/vdqutw2y/

<header><h1> 
My title: {{title}} 
</h1></header> 
<p> 
    <a v-link="{ path: '/foo' }">Go to Foo</a> 
    <a v-link="{ path: '/bar' }">Go to Bar</a> 
</p> 
<router-view></router-view> 
<footer>Such footer, many links, wow!</footer>