Vuejs mẫu thừa kế

Question

Làm cách nào tôi có thể sử dụng mẫu thừa kế (Giống như những gì ngọc bích có, extends file.jade và sau đó các khối có cùng tên sẽ bị ghi đè)?

Tôi biết rằng tôi có thể làm mọi thứ với bố cục, nhưng đối với các thành phần như chân trang và tiêu đề xuất hiện trên mỗi trang ngoại trừ một hoặc hai (ví dụ: trang đăng nhập), tôi phải viết chúng trên mọi thành phần. Trong ứng dụng của tôi, tôi có một điều hướng cấp hai và có vẻ như rất khó để lặp lại chúng trên mỗi một trong các thành phần con đó: (

Tôi biết rằng mình có thể sử dụng ngọc và kế thừa tệp ngọc trong các thành phần của mình, nhưng có vẻ sai bởi vì tôi sẽ có một số ngọc bích và một số tác phẩm Vue, là có cách nào khác bất kỳ để làm điều này?

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

những gì tôi đã giải quyết cho, là một thư mục bố trí đầy với cách bài trí ngọc bích và tôi sử dụng họ sử dụng vue-cli với webpack template.

Answer 1

Trong trường hợp chung nhất trường hợp nếu bạn phải lặp lại cùng một HTML lặp đi lặp lại, một tùy chọn bạn có thể sử dụng là <partial> s.

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

đâu bạn khai báo partials như

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

Tuy nhiên nếu bạn đang xây dựng một Single Page Application chiến lược bạn có thể làm theo là chỉ cần có một tiêu đề và một chân quanh <router-view> của bạn, đây là một jsfiddle thể hiện cách làm.

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>