vue组件分两行排列

在Vue.js中，如果你想要将两个组件并排放置并且跨两行显示，可以使用`v-row`和`v-col`来自`bootstrap-vue`库的网格系统，或者自定义CSS布局。这里以`bootstrap-vue`为例：

<template>
  <b-container fluid>
    <b-row justify="center">
      <b-col cols="6" :key="1"> <!-- 第一个组件 -->
        <your-component-a></your-component-a>
      </b-col>
      
      <b-col cols="6" :key="2"> <!-- 第二个组件 -->
        <your-component-b></your-component-b>
      </b-col>
    </b-row>
  </b-container>
</template>

这里，我们创建了一个水平居中的容器（`b-container`），然后在其中添加了两个等宽的列(`b-col`)，分别放置你的组件A和组件B，每个占总宽度的一半。

如果你不想依赖外部库，也可以通过CSS来实现类似的效果，比如使用Flexbox或Grid布局：

<div class="row">
  <div class="col-6" :key="1">
    <your-component-a></your-component-a>
  </div>
  <div class="col-6" :key="2">
    <your-component-b></your-component-b>
  </div>
</div>

在CSS中，`.row`用于开启行级布局，`.col-6`表示每行占用6个等份。