Javascript Vuejs模板继承

我如何使用模板继承（比如jade拥有的，

扩展file.jade

，然后相同名称的块将被覆盖）

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

我知道我可以使用jade，然后在我的组件中继承一个jade文件，但这似乎是错误的，因为我会有一些jade和一些Vue文件，还有其他方法吗

// Component.vue

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

//Component.vue
扩展/标准布局
块内容
路由器视图

//StandardLayout.Vue
div
导航栏
分区集装箱
隔套
分区行
块内容

---

我已经解决的是一个布局文件夹，里面装满了jade布局，我使用它们来扩展我的组件。我使用vue cli。在最常见的情况下，如果您必须反复重复相同的HTML，可以使用的一个选项是

s

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

我的内容

在这里，你可以声明partials为

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

Vue.partial（'header'，'这是标题：{{title}}}）
Vue.partial（'footer'，'Mini footer'）

但是，如果您正在构建一个单页应用程序，您可以遵循的策略是在

周围简单地有一个页眉和一个页脚，下面是一个jsfiddle，它演示了如何做

我的头衔：{{title}

去福
去酒吧

这样的页脚，很多链接，哇！

如果你懂中文，请看

//基本组件
从“.”导入按钮/ButtonClick'
导出默认值{
组件：{Button}
}
//继承组件
从“./BaseComponent”导入BaseComponent
从“./OtherButton”导入按钮
导出默认值{
扩展：BaseComponent
组成部分：{
按钮
}
} 

---

子组件的按钮将被替换为OtherButton。我们可以在OtherButton中执行某些操作

可能我缺少一些内容，但如果您使用的是

路由器视图

，则应使用新页面内容动态更改该元素。因此，您只需要一个页面的布局代码。不，您没有，我正在使用路由器b但是有些部分只是html标记，我不想用路由器继承它们，我只想继承标记，我现在使用路由器方法，但似乎太过熟练了，我使用了路由器视图，正如你所建议的，我正在寻找一种干燥html标记的方法：）使用愚蠢（只是html标记，没有任何js）是错误的吗组件？我觉得有点傻，我写的是概念的证明。如果您正在开发一个大型应用程序，当然您希望将复杂的HTML封装在组件中。顺便说一句，Vue 2.0中不再存在部分

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

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

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

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

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

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