Quand et comment l’utiliser / Blogs / Perficient

Le rendu dynamique des composants dans Vue.js vous permet d’afficher différents composants en fonction des conditions au moment de l’exécution. Cette fonctionnalité est pratique pour créer des applications flexibles, conviviales et évolutives. Au lieu de coder en dur les composants dans la mise en page, vous pouvez basculer dynamiquement ou charger des composants selon vos besoins.

Qu’est-ce que le rendu de composants dynamiques ?

Normalement, les composants sont corrigés dans la mise en page de l’application. Le rendu dynamique des composants change cela en permettant aux composants de se charger en fonction de certaines conditions. Vues La balise facilite cela en liant l’attribut is à un nom de composant ou à une configuration.

Par exemple:

//Path: src/components/DynamicComponents/Simple.vue
<template>
    <component :is="currentComponent"></component>
</template>

Ici, composant actuel décide quel composant est affiché. Cette approche est utile pour changer d’onglet, afficher du contenu conditionnel ou réutiliser des mises en page.

Quand utiliser le rendu de composants dynamiques ?

Le rendu dynamique des composants convient aux scénarios où la flexibilité et la réutilisabilité sont des priorités. Voici quelques cas d’utilisation courants :

1. Affichages conditionnels : Remplacer plusieurs v-si conditions avec des composants dynamiques pour une structure plus propre et plus simple.
2. Interfaces à onglets : Utilisez des composants dynamiques pour afficher uniquement le contenu de l’onglet actif dans des présentations à onglets.
3. Sections réutilisables : Chargez différents en-têtes, pieds de page ou barres latérales sans dupliquer le code.
4. Formulaires en plusieurs étapes : Chargez dynamiquement les composants pour chaque étape d’un flux de travail, améliorant ainsi les performances et la maintenabilité.
5. Tableaux de bord : Créez des tableaux de bord personnalisables où les widgets ou modules sont rendus dynamiquement en fonction des préférences de l’utilisateur.

Comment utiliser le rendu de composants dynamiques ?

Le rendu dynamique des composants dans Vue.js s’articule autour de élément. Cet élément change dynamiquement le composant rendu en fonction de la valeur de l’attribut is.

1) Basculer entre les composants

Commençons par un exemple de base dans lequel un clic sur un bouton change le composant rendu.

Étape 1 : définir les composants

ComposantA.vue

//Path: src/components/DynamicComponents/ComponentA.vue
<template>
    <div>
      <h2>Component A</h2>
      <p>This is Component A. Welcome!</p>
    </div>
</template>
  
<script>
  export default {
    name: 'ComponentA',
  };
</script>

ComposantB.vue

//Path: src/components/DynamicComponents/ComponentB.vue
<template>
    <div>
      <h2>Component B</h2>
      <p>This is Component B. Welcome!</p>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ComponentB',
  };
  </script>

Étape 2 : Application principale

Main.vue

//Path: src/components/DynamicComponents/Main.vue
<template>
  <div id="app">
    <h1>Dynamic Component Switching Example</h1>
    <div class="buttons">
      <!-- Buttons to Switch Components -->
      <button @click="currentComponent="ComponentA"">Show Component A</button>
      <button @click="currentComponent="ComponentB"">Show Component B</button>
    </div>
    <!-- Dynamic Component Rendering -->
    <component :is="currentComponent" class="dynamic-component"></component>
  </div>
</template>
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
export default {
 components: {
 ComponentA, 
 ComponentB, 
},
  data() {
    return {
      currentComponent: 'ComponentA', // Default component to render
    };
  },
};
</script>

Sortir:

Comment ça marche

1. Enregistrement des composants : ComponentA et ComponentB sont importés dans App.vue et enregistrés dans l’objet composants.
2. Commutation dynamique : La propriété de données currentComponent contrôle quel composant est affiché.
   • Cliquer sur « Afficher le composant A » définit composant actuel à ‘ComposantA’.
   • Cliquer sur « Afficher le composant B » définit composant actuel à ‘ComposantB’.
3. Rendu dynamique : Le > L’élément restitue dynamiquement le composant spécifié par currentComponent.

2) Onglets dynamiques avec accessoires

Les composants dynamiques de Vue.js vous permettent d’afficher facilement différents composants en fonction des actions de l’utilisateur ou des changements dans l’état de l’application. Par exemple, dans une interface à onglets, ils vous permettent de basculer entre les vues de contenu tout en gardant le code propre et organisé. Vous pouvez également rendre ces composants interactifs en leur transmettant des données à l’aide d’accessoires. Imaginez un tableau de bord avec des widgets tels que Informations utilisateur, Notifications et Tâches, où chaque widget est un composant distinct.

Étape 1 : Définir les composants

Tab1.vue

//Path: src/components/DynamicComponents/Tab1.vue
<template>
  <div>
    <h3>Welcome to Tab 1</h3>
    <p>This is the content for Tab 1.</p>
  </div>
</template>
<script>
export default{
  name: 'Tab1',
  props: ['message']
}
</script>

Tab2.vue

//Path: src/components/DynamicComponents/Tab2.vue
<template>
  <div>
    <h3>Welcome to Tab 2</h3>
    <p>This is the content for Tab 2.</p>
  </div>
</template>
<script>
export default{
  name: 'Tab2',
  props: ['message']
}
</script>

Tab3.vue

//Path: src/components/DynamicComponents/Tab3.vue
<template>
  <div>
    <h3>Welcome to Tab 3</h3>
    <p>This is the content for Tab 3.</p>
  </div>
</template>
<script>
export default{
  name: 'Tab3',
  props: ['message']
}
</script>

Étape 2 : Application principale

app.vue

<template>
  <div id="app">
    <h1>Dynamic Tabs with Props Example</h1>
    <!-- Tab Navigation -->
    <div class="tab-buttons">
      <button v-for="tab in tabs" :key="tab.name" @click="currentTab = tab.component">
        {{ tab.name }}
      </button>
    </div>

    <!-- Dynamic Component Rendering -->
    <component :is="currentTab" v-bind="currentTabProps" class="dynamic-tab"></component>
  </div>
</template>
<script>
import Tab1 from './Tab1.vue';
import Tab2 from './Tab2.vue';
import Tab3 from './Tab3.vue';
export default {
 components: {
 Tab1, 
 Tab2, 
 Tab3, 
}, 
  data() {
    return {
      // Tabs configuration
      tabs: [
        { name: 'Tab 1', component: 'Tab1', props: { message: 'Hello from Tab 1!' } },
        { name: 'Tab 2', component: 'Tab2', props: { info: 'Data for Tab 2' } },
        { name: 'Tab 3', component: 'Tab3', props: { details: 'Details for Tab 3' } },
      ],
      currentTab: 'Tab1', // Default tab component
    };
  },
  computed: {
    // Find and provide the props for the current tab
    currentTabProps() {
      const tab = this.tabs.find(t => t.component === this.currentTab);
      return tab ? tab.props : {};
    },
  },
};
</script>

Sortir:

Comment ça marche

1. Configuration des onglets : Dans App.vue, il existe un tableau d’onglets qui définit le nom de chaque onglet, le composant associé et les accessoires qu’il utilisera.
2. Rendu dynamique : L’élément est utilisé pour restituer dynamiquement le composant pour l’onglet actuellement sélectionné (currentTab). Les accessoires sont transmis au composant dynamique à l’aide de la directive v-bind.
3. Commutation Onglets : Lorsque vous cliquez sur un bouton de tabulation, la valeur currentTab est mise à jour. Cela déclenche le rendu par Vue du composant dynamique pour l’onglet sélectionné.

3) Rendu des listes de composants dynamiques dans Vue.js

Dans Vue.js, le rendu d’une liste de composants dynamiques est une fonctionnalité utile, en particulier pour des éléments tels que les tableaux de bord ou l’affichage de différents types de widgets basés sur des données. Par exemple, vous pouvez créer un tableau de bord dynamique avec des widgets tels que Informations utilisateur, Notifications et Tâches. Chaque widget est son propre composant et peut être affiché dynamiquement en fonction des données fournies.

Composants enfants

UserInfo.vue

<template>
    <div class="widget">
      <h3>User Info</h3>
      <p><strong>Name:</strong> {{ name }}</p>
      <p><strong>Email:</strong> {{ email }}</p>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      name: String,
      email: String,
    },
  };
  </script>

Notification.vue

<template>
    <div class="widget">
      <h3>Notifications</h3>
      <ul>
        <li v-for="(notification, index) in notifications" :key="index">
          {{ notification }}
        </li>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      notifications: Array,
    },
  };
  </script>

Tâche.vue

<template>
    <div class="widget">
      <h3>Tasks</h3>
      <ul>
        <li v-for="(task, index) in tasks" :key="index">
          {{ task }}
        </li>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      tasks: Array,
    },
  };
  </script>

Composant parent :

app.vue

<template>
    <div id="app">
      <h1>Dynamic Dashboard</h1>
      <div class="dashboard">
        <!-- Render List of Dynamic Components -->
        <component
          v-for="(widget, index) in widgets"
          :is="widget.type"
          v-bind="widget.props"
          :key="index"
          class="dashboard-widget"
        ></component>
      </div>
    </div>
  </template>
  <script>
  import UserInfo from './UserInfo.vue';
  import Notifications from './Notification.vue';
  import Tasks from './Tasks.vue';
  export default {
  components: {
  UserInfo, 
  Notifications, 
  Tasks, 
  },
    data() {
      return {
        // List of widgets to render dynamically
        widgets: [
          {
            type: 'UserInfo',
            props: {
              name: 'ABC ',
              email: 'abc.xyz@example.com',
            },
          },
          {
            type: 'Notifications',
            props: {
              notifications: [
                'New comment on your post',
                'Your profile has been updated',
              ],
            },
          },
          {
            type: 'Tasks',
            props: {
              tasks: ['Complete the Vue.js tutorial', 'Update the project plan', 'Fix the login bug'],
            },
          },
        ],
      };
    },
  };
  </script>

Sortir:

Comment ça marche

1. Composants dynamiques : Le L’élément restitue dynamiquement un composant spécifié par le type de propriété dans le tableau des widgets.
2. Tableau de widgets : Chaque objet du tableau widgets contient :
   • taper: Le nom du composant à restituer (par exemple, ‘UserInfo’).
   • accessoires: Les données à transmettre au composant en tant qu’accessoires.
3. Réutilisabilité
   • Chaque widget est un composant autonome avec sa propre logique et ses propres accessoires, ce qui le rend réutilisable.
4. Interface utilisateur basée sur les données
   • L’ajout, la suppression ou la modification de widgets est aussi simple que la mise à jour du tableau de widgets dans le composant parent.

4) Chargement paresseux des composants dynamiques

Le chargement paresseux des composants dynamiques permet d’améliorer les performances en chargeant les composants uniquement lorsqu’ils sont nécessaires. Dans Vue.js, vous pouvez utiliser des fonctions asynchrones pour charger des composants paresseux, ce qui accélère le chargement des grandes applications comportant de nombreux composants.

Composants enfants

Tab1.vue

<template>
  <div>
    <h3>Welcome to Tab 1</h3>
    <p>This is the content for Tab 1.</p>
  </div>
</template>
<script>
export default{
  name: 'Tab1',
  props: ['message']
}
</script>

Tab2.vue

<template>
  <div>
    <h3>Welcome to Tab 2</h3>
    <p>This is the content for Tab 2.</p>
  </div>
</template>
<script>
export default{
  name: 'Tab2',
  props: ['message']
}
</script>

Tab3.vue

<template>
  <div>
    <h3>Welcome to Tab 3</h3>
    <p>This is the content for Tab 3.</p>
  </div>
</template>
<script>
export default{
  name: 'Tab3',
  props: ['message']
}
</script>

Composant parent :

app.vue

<template>
  <div id="app">
    <h1>Lazy Loading Dynamic Components</h1>
    <!-- Buttons to Load Components -->
    <div class="tab-buttons">
      <button v-for="tab in tabs" :key="tab.name" @click="loadTab(tab.component)">
        {{ tab.name }}
      </button>
    </div>
    <!-- Lazy-Loaded Dynamic Component -->
    <component v-if="currentTab" :is="currentTab" class="dynamic-tab"></component>
  </div>
</template>

<script>
import { markRaw } from 'vue';

export default {
  data() {
    return {
      // Configuration for dynamic components
      tabs: [
        { name: 'Tab 1', component: () => import('./Tab1.vue') },
        { name: 'Tab 2', component: () => import('./Tab2.vue') },
        { name: 'Tab 3', component: () => import('./Tab3.vue') },
      ],
      currentTab: null, // Initially no tab is loaded
    };
  },
  methods: {
    async loadTab(componentLoader) {
      // Resolve the module and mark it as raw
      const resolvedComponent = await componentLoader();
      this.currentTab = markRaw(resolvedComponent.default);
    },
  },
};
</script>

<style>
#app {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 50px auto;
  text-align: center;
}

.tab-buttons {
  margin-bottom: 20px;
}

button {
  padding: 10px 15px;
  margin: 0 5px;
  border: none;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.dynamic-tab {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
}
</style>

Sortir:

Conclusion

Le rendu dynamique des composants dans Vue.js est une fonctionnalité puissante pour créer des applications flexibles et modernes. Il permet aux développeurs d’afficher les composants en fonction des conditions, de changer de disposition et d’améliorer les flux de travail, conduisant ainsi à un code plus propre et plus évolutif. Que vous créiez un formulaire en plusieurs étapes, une interface à onglets ou un tableau de bord personnalisable, apprendre à utiliser des composants dynamiques améliorera vos compétences Vue.js.