Comment utiliser les composants dynamiques dans Vue.js

Cet article explique comment référencer des éléments HTML dans des composants dans Vue.js. Vous pouvez changer de vue ou de modèle de composant en utilisant Vue Router ou en créant des composants dynamiques.

Vue Router est utilisé pour naviguer entre les vues ou les modèles de composants dans le DOM. Pour utiliser Vue Router, définissez une route dans le composant route et indiquez à Vue que le nouveau composant doit être monté sur un événement (comme un clic).

C'est la bonne façon de gérer la navigation dans les composants de la barre latérale et du menu au sein d'une interface utilisateur.

Si vous souhaitez basculer entre deux composants arbitraires montés dans le DOM sans créer de routes, vous souhaiterez peut-être utiliser des composants dynamiques.

Composants dynamiques

Les composants dynamiques Vue permettent aux utilisateurs de basculer entre deux composants ou plus sans routage, même après un retour en arrière. Préserver l'état des données lors de l'initialisation. composants.

L'idée principale est de permettre aux utilisateurs de monter et démonter dynamiquement des composants dans l'interface utilisateur sans utiliser de routeur.

Pourquoi les composants dynamiques sont-ils importants

Lors de la conception d'une interface utilisateur, vous avez besoin d'une certaine forme de flexibilité pour afficher ou masquer en fonction de l'application ? Composants imbriqués de l’état du programme. Les composants dynamiques fournissent cette plateforme de manière efficace et simple.

Cette fonctionnalité vous permet d'économiser beaucoup de code car vous pouvez facilement implémenter des composants dynamiques à l'aide de constructions conditionnelles Vue telles que v-if et v-else. Vous pouvez utiliser des structures conditionnelles pour implémenter des composants dynamiques en utilisant des espaces réservés pour lier facilement la logique au composant.

Cette approche garantit que votre présentation est toujours propre et claire.

peut créer des composants dynamiques dans Vue. Sur votre ordinateur, vous aurez besoin des éléments suivants :

Node.js version 10.x et supérieure installé. Vous pouvez vérifier que vous disposez de Node.js version 10.x en exécutant la commande suivante dans un terminal/invite de commande :

node -v

Un éditeur de code (Visual Studio est recommandé).

La dernière version de Vue, installée globalement sur votre ordinateur.

Vue CLI 3.0 est installé sur votre ordinateur. Pour cela, désinstallez d'abord l'ancienne version CLI :

npm uninstall -g vue-cli

Ensuite, installez-en une nouvelle :

npm install -g @vue/cli

Syntaxe des composants dynamiques

Vue fournit un élément de modèle spécial pour les composants dynamiques, appelé component en abrégé. La syntaxe est la suivante :

<component v-bind:is=”currentComponent”></component>

L'élément composant peut également être une balise à fermeture automatique :

<component v-bind:is=”currentComponent”/>

La première option est la meilleure pour la compatibilité de navigation.

Démo

Téléchargez le projet de démarrage et ouvrez-le dans VS Code pour obtenir quelques exemples de composants dynamiques. starter Les projets vous permettent d'accéder à un composant de test existant, de créer un deuxième composant de test et de basculer entre les deux.

Accédez au dossier components et créez un nouveau fichier. Nommez le fichier Test2.vue et copiez le bloc de code suivant dans le fichier :

<template>
  <div><h1>I am Test 2</h1>
  </div>
</template>
<script>
export default {
  name: &#39;Test2&#39;,
  props: {
    msg: String
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Maintenant que vous avez votre deuxième composant, allez dans le fichier App.vue et enregistrez le composant :

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test />
    <Test2 />
  </div>
</template>
<script>
import Test from &#39;./components/Test.vue&#39;
import Test2 from &#39;./components/Test2.vue&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test, Test2
  }
}
</script>

Les deux composants de test sont désormais imbriqués dans le composant d'application racine. Si vous souhaitez simplement monter un composant puis passer dynamiquement à un autre composant, vous devez créer un composant dynamique.

Copiez le bloc de code suivant dans la section modèle du fichier app.vue :

<template>
   <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <component is="Test" />
   </div>
</template>

Ensuite, exécutez l'application à l'aide de la commande serve suivante :

npm run serve

Vous verra que seul le composant Test 1 est affiché.

C'est exactement la réponse que vous obtiendrez si seul l'élément Test 1 est spécifié dans le modèle. Pour rendre un composant dynamique, on peut le lier à l'attribut set à l'aide de la directive v-bind.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <component v-bind:is="component" />
  </div>
</template>
<script>
import Test from &#39;./components/Test.vue&#39;
import Test2 from &#39;./components/Test2.vue&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test, Test2
  },
  data (){
    return {
      component:"Test"
    }
  }
}
</script>

Votre composant est maintenant lié à la propriété du composant dans les données. Si vous basculez le composant sur Test2, il montera automatiquement le composant Test2.

Testez-le sur votre navigateur.

Ajouter des appels de méthode

Vous pouvez ajouter des appels de méthode pour contrôler la logique d'affichage dynamique des composants. L'élément composant vous permet d'accéder à chaque construction de votre instance Vue.

Voici un exemple d'une petite méthode pour basculer ces deux composants :

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <component v-bind:is="component" />
    <button v-on:click="toggle">Toggle</button>
  </div>
</template>
<script>
import Test from &#39;./components/Test.vue&#39;
import Test2 from &#39;./components/Test2.vue&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test,
     Test2
  },
  data (){
    return {
      component:"Test2"
    }
  },
  methods: {
    toggle(){
      if (this.component === Test) {
        this.component = Test2;
      } else {
        this.component = Test;
      }
    }
  }
}
</script>

Conserver la valeur des données valide lors du changement

Lorsque l'équipe Vue a créé cette fonctionnalité, elle a choisi d'étendre ses fonctionnalités pour inclure le stockage des valeurs de données pour chaque état.

Pour stocker ces données, Vue fournit un élément de modèle nommé keep-alive. En utilisant keep-alive, vous pouvez vous assurer que l'état de votre composant reste intact après être revenu d'un composant à un autre.

Par exemple, si vous cliquez sur un lien ou entrez une valeur dans une zone de texte, puis changez de composant, keep-alive vous ramènera au même lien ou à la même zone de texte que vous avez utilisé lorsque vous êtes revenu.

Pour activer keep-alive, accédez à la section modèles du fichier app.vue et enveloppez l'élément du composant avec un élément keep-alive :

<keep-alive>
  <component v-bind:is="component" />
</keep-alive>

要查看它是否工作，请将表单元素添加到测试中。vue文件，在模板部分添加如下代码块:

<template>
  <div><h1>I am Test 1</h1>
       <form>
         First name:<br>
         <input type="text" name="firstname"><br>
         Last name:<br>
         <input type="text" name="lastname">
       </form>
  </div>
</template>

保存所有项目文件后，再次运行应用程序。在输入框中键入，切换组件，并切换回原始组件。您将注意到在切换组件之前输入的值与之前输入的值完全相同。

结论

本文介绍了如何在Vue.js工作流中使用动态组件。您现在还可以通过keep-alive扩展组件元素的能力。

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!