javascript - Vuejs template inheritance - Stack Overflow

admin管理员组

文章数量:1332873

How can I use template inheritance (Like what jade has, extends file.jade and then the blocks with the same name would be overwritten)?

I know that I can do everything with position, but for ponents like footer and header which appear on every single page except one or two (e.g.login page) I must write them on every single ponent. In my app I have a two level navigation and it seems painful to repeat them on every one of those child ponents :(

I know that I can use jade and then inherit a jade file within my ponents, but it seems wrong because I would have some jade and some Vue files, is there any other way to do this?

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

What I've settled for, is a layouts folder filled with jade layouts and I use them to extend my ponents. I used vue-cli with webpack template.

How can I use template inheritance (Like what jade has, extends file.jade and then the blocks with the same name would be overwritten)?

I know that I can do everything with position, but for ponents like footer and header which appear on every single page except one or two (e.g.login page) I must write them on every single ponent. In my app I have a two level navigation and it seems painful to repeat them on every one of those child ponents :(

I know that I can use jade and then inherit a jade file within my ponents, but it seems wrong because I would have some jade and some Vue files, is there any other way to do this?

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

What I've settled for, is a layouts folder filled with jade layouts and I use them to extend my ponents. I used vue-cli with webpack template.

• javascript
• templates
• vue.js

Share Improve this question Follow edited Jul 12, 2016 at 13:12 Hashem Qolami 99.6k2727 gold badges155155 silver badges165165 bronze badges asked Jul 12, 2016 at 12:21 MohibeykiMohibeyki 45966 silver badges1616 bronze badges 2

• Maybe I'm missing something but if you are using a router-view you should just be dynamically changing out that one element with new page content. So, you only need the layout code for one page. – qw3n Commented Aug 2, 2016 at 3:45
• No you are not, Im using the router but there are some parts that are just html markup that I dont want to inherit them using the router, I just want the markup inherited, Im using the router method now but it seems like overkill – Mohibeyki Commented Aug 7, 2016 at 14:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

In the most general case if you have to repeat the same HTML over and over, one option you could use is <partial>s.

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

Where you declare partials as

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

However if you are building a Single Page Application the strategy you could follow is to simply have a header and a footer around your <router-view>, here is a jsfiddle that demonstrates how to do.

https://jsfiddle/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>

If you know Chinses, please look it

// Base Component
<template>
  <div class="base-thing special-class">
    <Button />
  </div>
</template>

<script>
import Button from './ButtonClick'
export default {
  ponents: { Button }
}
</script>

// Inheriting Component
<script>
import BaseComponent from './BaseComponent'
import Button from './OtherButton'

export default {
  extends: BaseComponent
  ponents: {
    Button
  }
} 
</script>

The Button of Child Component will be replaced OtherButton. We can do something in the OtherButton

本文标签： javascriptVuejs template inheritanceStack Overflow