我正在使用 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 组件被渲染到你放置它的标签的地方,但这在这里不起作用,我不知道为什么。
在这张照片中你可以看到问题: 页面父 vue 及其所有 div 都呈现在顶部(第二个灰色条是页脚),尽管我希望我的方法将 child 呈现到该主要部分,但它们实际上是在第 1 页之后呈现的,所以基本上在它下面。
我有 bootstrapvue 我只是觉得这样会更简单,如果我错了请告诉我
最佳答案
但是你的 css 代码在哪里?
我不知道我是否理解正确,但如果你想#links 和#rechts 彼此相邻,你可以通过 flex 来实现。
.page-main-content{display: flex;}
#links{flex: 0 0 70%;}
#rechts{flex: 0 0 30%;}
关于javascript - 如何将 "child.vue"加载到正确的 "parent.vue"位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56870092/