Шаблон Vuejs наследования

как я могу использовать наследование шаблонов (например, то, что имеет jade,extends file.jade и тогда блоки с тем же именем будут перезаписаны)?

Я знаю, что могу сделать все с композицией, но для таких компонентов, как нижний колонтитул и заголовок, которые появляются на каждой странице, кроме одной или двух (e.г. страница входа) я должен написать их на каждом компоненте. В моем приложении у меня есть двухуровневая навигация, и кажется болезненным повторять их на каждом из этих дочерних компонентов : (

I знайте, что я могу использовать 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 шаблон.

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