javascript - Vuejs模板继承

Question

如何使用模板继承(就像 jade 一样，extends file.jade 然后同名的 block 将被覆盖)？

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

我知道我可以使用 jade 然后在我的组件中继承一个 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 布局，我用它们来扩展我的组件。我将 vue-cli 与 webpack template 一起使用.

Answer 1

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

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