Afficher dynamiquement un composant Vue

En utilisant Vue, vous définissez la disposition de l'application à l'aide de composants. Au début, vous placez manuellement les composants où vous le souhaitez, mais à un moment donné, vous devez disposer d'un moyen plus flexible d'afficher ou de masquer les composants en fonction de l'état de l'application.

Utilisation de directives conditionnelles

L'option la plus simple consiste à utiliser lev-ifetv-elsedirectives.

Voici un exemple. Lev-ifdirective vérifie lenoTodospropriété calculée, qui renvoie false si la propriété statetodoscontient au moins un élément:

<template>
  <main>
    <AddFirstTodo v-if="noTodos" />
    <div v-else>
      <AddTodo />
      <Todos :todos=todos />
    </div>
  </main>
</template>

<script> export default { data() { return { todos: [], } }, computed: { noTodos() { return this.todos.length === 0 } } } </script>

Cela permet de résoudre les besoins de nombreuses applications sans atteindre des configurations plus complexes. Les conditions peuvent également être imbriquées, comme ceci:

<template>
  <main>
    <Component1 v-if="shouldShowComponent1" />
    <div v-else>
      <Component2 v-if="shouldShowComponent2" />
      <div v-else>
        <Component3 />
      </div>
    </div>
  </main>
</template>

En utilisant lecomponentComposant etis

Au lieu de créerv-ifetv-elsestructures, vous pouvez créer votre modèle de sorte qu'il y ait un espace réservé qui se verra attribuer dynamiquement un composant.

C'est ce que lecomponentle composant fait, avec l'aide duv-bind:isdirectif.

<component v-bind:is="componentName"></component>

componentNameest une propriété de l'état qui identifie le nom du composant que nous voulons rendre. Il peut faire partie de l'état ou d'une propriété calculée:

<script>
export default {
  data() {
    return {
      componentName: 'aComponent',
    }
  }
}
</script>

Téléchargez mon gratuitManuel de Vue


Plus de tutoriels vue: