vue 如何实现两个组件在同一行

在Vue中，要实现两个组件在同一行显示，可以使用CSS的Flexbox布局或者Grid布局。以下是使用Flexbox布局的一个例子：

1. 创建两个Vue组件，例如ComponentA.vue和ComponentB.vue。
2. 在父组件中，使用flex容器包裹这两个子组件。

<!-- 父组件中的模板 -->
<template>
  <div class="container">
    <ComponentA />
    <ComponentB />
  </div>
</template>
 
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
 
export default {
  components: {
    ComponentA,
    ComponentB
  }
};
</script>
 
<style>
.container {
  display: flex; /* 使用Flexbox布局 */
}
</style>

在这个例子中，.container 是一个flex容器，其中的子元素（即组件）会被自动放置在同一行内，除非子元素设置了 flex-wrap 属性为 wrap，在这种情况下它们会换行显示。如果需要对子元素进行更细致的布局控制，可以使用 flex-grow, flex-shrink, flex-basis, align-self 等flexbox属性。