Vuejs模板继承

Question

我怎样才能使用模板继承(就像jade那样,extends file.jade然后会覆盖同名的块)？

我知道我可以用组合做任何事情,但对于除了一个或两个(例如登录页面)之外的每个页面上出现的页脚和页眉等组件,我必须在每个组件上编写它们.在我的应用程序中,我有一个两级导航,在每个子组件上重复它们似乎很痛苦:(

我知道我可以使用jade然后继承我的组件中的玉文件,但它似乎错了,因为我会有一些玉和一些Vue文件,有没有其他方法来做到这一点？

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

我已经解决的问题是,一个布局文件夹填充了jade布局,我用它来扩展我的组件.我在webpack模板中使用了vue-cli .

Answer 1

在最常见的情况下，如果您必须一遍又一遍地重复相同的 HTML，您可以使用的一个选项是<partial>s。

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

您将部分声明为

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

但是，如果您正在构建单页应用程序，您可以遵循的策略是在您的 周围简单地添加页眉和页脚<router-view>，这里有一个 jsfiddle 演示了如何操作。

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>