代码之家 › 专栏 › 技术社区 › Artur Müller Romanov

是否可以有条件地渲染布局?

vuejs3 vue.js html

0

Artur Müller Romanov · 技术社区 · 3 年前

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

<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>

但是对于大型组件,这很快就会变得混乱+我必须两次维护相同的代码。可以通过移动来简化 //component contents 并导入两次。有没有更优雅的方法?

这是一个 layout :

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

1 回复 | 直到 3 年前

1

2

Estus Flask 3 年前

这是动态组件的情况:

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