Is it possible to conditionally render layouts?-CodePudding

I want to change layouts in a component depending on a condition from this:

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

to this:

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

The only way I know of how to render components with a condition is with v-if which doesn't render child components, if the condition is not met. I could do this:

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

but with large components this gets messy quickly I would have to maintain the same code twice. It could be simplified by moving //component contents into its own component and import it twice. Is there a more elegant way to do this?

Here's an example of a layout:

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

CodePudding user response：

This is the case for dynamic component:

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

For more complex expression it can be moved to computed property.