Vuejs模板继承答案

【问题标题】：Vuejs template inheritanceVuejs模板继承
【发布时间】：2016-11-14 16:31:24
【问题描述】：

如何使用模板继承（就像玉有的那样，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>

我已经解决了一个布局文件夹，里面装满了翡翠布局，我用它们来扩展我的组件。我将 vue-cli 与 webpack template 一起使用。

【问题讨论】：

也许我遗漏了一些东西，但如果你使用的是router-view，你应该只是动态地用新的页面内容更改那个元素。所以，你只需要一页的布局代码。
不，你不是，我使用路由器，但有些部分只是 html 标记，我不想使用路由器继承它们，我只想继承标记，我使用路由器方法现在，但它似乎有点矫枉过正

标签： javascript templates vue.js

【解决方案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>

【讨论】：

好吧，我按照你的建议使用了路由器视图，我正在寻找一种方法来干燥 html 标记:) 使用愚蠢的（只是 html 标记，没有任何 js）组件是错误的吗？我觉得有点傻
我写的是概念证明。如果您正在开发一个大型应用程序，那么您当然希望将复杂的 HTML 封装在组件中。
顺便说一下，从 Vue 2.0 开始，partials 不再存在

【解决方案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 中做一些事情

【讨论】：