我想根据以下条件更改组件中的布局:
<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>
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?
以下是layout的示例:
<template>
<v-nav/>
<slot/>
<v-footer/>
</template>