javascript - Vuejs模板继承

标签 javascript templates vue.js

我怎样才能使用模板继承(就像 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 .

最佳答案

最一般的如果您必须一遍又一遍地重复相同的 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>

关于javascript - Vuejs模板继承,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38328760/

相关文章:

javascript - Javascript中的属性如何修改对象

javascript - jQuery使用click功能仅引用按钮

c++ - std::tr1::函数赋值和绑定(bind)

c++ - 如何强制函数只接受左值引用参数

c++ - "unspecialized class template can' t 用作模板参数是什么意思?

javascript - 在 JavaScript 中定义固定的排序顺序

javascript - 如何在jQuery中实现mouseleave

javascript - “Not allowed to load local resource” Electron/VUE

vue.js - 在 mapActions() 中找不到 Vuex 模块命名空间

javascript - 使用vue.js v-for功能和axios获取每个未定义错误的控制台