Vue.js Vuejs模板继承

发布于08月08日

我如何使用模板继承(比如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布局，我用它们来扩展我的组件.我将vue cli与webpack template一起使用.

推荐答案

在most general的例子中，如果你不得不一遍又一遍地重复相同的HTML，你可以使用的一个选项是<partial>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>')

然而，如果你正在构建一个Single Page Application，你可以遵循的策略是在<router-view>左右有一个页眉和一个页脚，下面是一个JSFIDLE，演示如何做到这一点.

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>

Vue.js相关问答推荐

VueUse onClickOutside不支持右键单击

如何在AXIOS调用响应中动态导入视频并创建它的绝对路径？

Vuetify 2中自定义标头的排序和筛选

VueI18n 无法读取或更改组合 API 中的区域设置

从组件中检索 Shopware CMS 编辑器中的自定义实体数据

已分配计算(computed)属性，但它没有设置器

在组件之间共享 websocket 连接

Vuetify grid layout - 如何填充网格中元素的高度

Eslint Vue 3 解析错误：'>' expected.eslint

Vuetify 置顶工具栏

Vue 和 Bootstrap Vue - 动态使用插槽

Webpack 你可能需要一个合适的加载器来处理这个文件类型

如何更改 Vuetify 日历日期格式

这是 v-on：change 的正确用法吗？

如何在 vue.config.js 中为生产设置 API 路径？

Vue.js webpack：如何获取目录中的文件列表？

Vue路由在新页面上回到顶部

在 Vue 应用程序中创建一个类的单个实例

为什么 router.currentRoute.path 没有react？

在另一个 props 的验证器中访问 props 值

实用课程推荐