javascript - 如何在 Vue 中将组件用作可重用模板？

Question

我正在使用 Vue 开发一个多页面应用程序，在我的项目中，我有一个名为“pages”的目录，其中包含每个页面的子目录。子目录包含它们自己的 App.vue 和 main.js，如下所示:

src
|
+--pages
  |
  +--Home
  |  |
  |  +-- App.vue
  |  +-- main.js
  |
  +--About/
  |  |
  |  +-- App.vue
  |  +-- main.js
  |
  +--base.vue

我来自 Django-land，哪里可以有一个包含大部分样式信息、标题等的模板，我可以跨页面重用该模板并注入(inject)内容，我正在尝试这样做和这里一样。我的大部分网站都在 base.vue 中，我希望能够呈现其他页面提供的不同内容。

例如:

基础.vue

<template>
<div>
  Header text.
  <div id="body">
  </div>
</div>
</template>

<style>
@import '../assets/style.css';
</style>

<script>
...
</script>

和 Home/App.vue

<template>
<div id="app">
  <div id="body"> <-- replace for this in base.vue, and use the styles defined in base.vue.
  New content
  </div>
</div>
</template>

<style>
</style>

<script>
...
</script>

所以页面基本上看起来像这样:

Header text.
New content

我如何使用 Vue 来解决这个问题？

Answer 1

为此您需要“广告位模板”:

https://v2.vuejs.org/v2/guide/components-slots.html

https://alligator.io/vuejs/component-slots/

谢谢!!