javascript - 如何将 "child.vue"加载到正确的 "parent.vue"位置

Question

我正在使用 vue 编写一个单页网络应用程序。它有 4 个“page.vue”，其中任何一个都有一个左右子 .vue 组件。

例如 Page1.vue 看起来像这样(我保留了样式和脚本以保持简短)

Page1Links & Page1Rechts 是我尝试加载到主要部分的子 VUE

(使用了 2 个单独的组件，因为其中一个需要尽快更改为更复杂的组件，并且编写它是为了让另一个组件可以保持原样)

<template>
  <div>
    <div class="page-wrapper">
      <div class="page-container">
        <div class="page-header">
          <h1 id="page-h1"><span>Mauderer</span> Containertreppenkonfigurator</h1>
        </div>
        <div class="page-main-content">
          <Page1Links id="links"/>
          <Page1Rechts id="rechts"/>
        </div>
        <div class="page-footer">

        </div>
      </div>
    </div>
  </div>
</template>

我想看到的是一个横跨整个页面宽度的页眉组件

下面是两个相邻的子组件，横跨整个宽度(70% 左图 30% 右图)

(包装在一些漂亮的设计中以明确它们属于一起，例如我尝试在 page-main-content 类周围放置一个框阴影，它没有显示另一个指示器表明我如何尝试它不起作用，或者更确切地说主 div 只是空的)

下面是页脚全宽

我得到的是页面顶部的所有 div:1. 标题分区2. main div(看起来是空的)3.页 footer 分

下面是两个 child.vue，它们彼此相邻，但这只是因为我把它们也强行放在了它们里面。

编辑:好的，感谢你们两个关于 flex 的信息，这有助于将布局从子组件中拉出。澄清:我的问题是我的子组件没有在它们的标签所在的主 div 内呈现。该 div class="page-main-content"为空，Page1Links 和 Page1Rechts 呈现在页脚下方。我认为，根据我的一点点 vue 经验，一个 .vue 组件被渲染到你放置它的标签的地方，但这在这里不起作用，我不知道为什么。

problem example

在这张照片中你可以看到问题:页面父 vue 及其所有 div 都呈现在顶部(第二个灰色条是页脚)，尽管我希望我的方法将 child 呈现到该主要部分，但它们实际上是在第 1 页之后呈现的，所以基本上在它下面。

我有 bootstrapvue 我只是觉得这样会更简单，如果我错了请告诉我

Answer 1

但是你的 css 代码在哪里？

我不知道我是否理解正确，但如果你想#links 和#rechts 彼此相邻，你可以通过 flex 来实现。

.page-main-content{display: flex;}
#links{flex: 0 0 70%;}
#rechts{flex: 0 0 30%;}