html - 是否可以有条件地渲染布局？

Question

我想根据以下条件更改组件中的布局:

<template>
  <layoutA>
    //component contents
  </layoutA>
</template>

对此:

<template>
  <layoutB>
    //component contents
  </layoutB>
</template>

我知道如何渲染带有条件的组件的唯一方法是使用 v-if ，如果不满足条件，它不会渲染子组件。我可以这样做:

<template>
  <layoutA v-if="condition">
    //component contents
  </layoutA>
  <layoutB v-else>
    //component contents
  </layoutB>
</template>

但是对于大型组件，这很快就会变得困惑+我必须维护相同的代码两次。可以通过将 //组件内容 移动到它自己的组件中并导入两次来简化它。有没有更优雅的方法来做到这一点？

这是一个布局示例:

<template>
  <v-nav/>
  <slot/>
  <v-footer/>
</template>

Answer 1

这是动态组件的情况:

  <componenent :is="condition ? 'layoutA' : 'layoutB'">
    //component contents
  </componenent>

对于更复杂的表达式，可以将其移至计算属性。