Question

如何使用模板继承（就像jade所拥有的那样，extends file.jade然后会覆盖具有相同名称的块）？

我知道我可以使用合成来完成所有工作，但对于除了一两个（例如登录页面）之外的每个页面上显示的页脚和页眉等组件，我必须在每个组件上编写它们。在我的应用程序中，我有一个两级导航，在每个子组件上重复它们似乎很痛苦：（

我知道我可以使用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布局，我用它来扩展我的组件。我在webpack template使用了vue-cli。

Answer 1

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

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

但是，如果您正在构建一个单页面应用程序，您可以遵循的策略是在<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>

Answer 2

如果您知道中国话，请查看it

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

子组件的按钮将被替换为OtherButton。我们可以在OtherButton中做一些事情

Vuejs模板继承

2 个答案: