如何将“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>

我想看到的是一个跨越整个页面宽度的标题组件

低于 2 个相邻的子组件跨越整个宽度 （70% 左图 30% 右图）

（包装在一些不错的设计中，以明确它们属于一起，例如，我尝试了围绕 page-main-content 类的框阴影，它没有显示另一个指示我如何尝试它不起作用，或者更确切地说主 div 是空的）

下面是页脚全宽

我得到的是页面顶部彼此下方的所有 div： 1. 标题 div 2. 主 div（显示为空） 3.页脚div

在这两个child.vue下面，它们是紧挨着的，但这只是因为我也强迫它们进入了它们。

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

problem example

在这张图片中，您可以看到问题： 页面父 vue 及其所有 div 都呈现在顶部（第二个灰色条是页脚），即使我希望我的方法将子级呈现到主要部分，它们实际上是在页面 1 之后呈现的，所以基本上在它下面。

我已经包含了 bootstrapvue 我只是认为这样会更简单，如果我错了请告诉我

Answer 1

我尝试了几次才成功，它确实解决了它，但我真的不明白为什么？ flex 现在将 page1 内的子项推送到 page-main-content 中。

我确实明白这比我所做的更方便（将组件的大小编码到自身中）但是组件之前每个 ohter 旁边所以 flex 所做的是强制子代在父代内渲染的下方/之后。

谢谢，问题解决了。

如果 sbd.知道一个简短的答案，但我仍然对为什么会这样感兴趣。

Answer 2

但是你的 css 代码在哪里？

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

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