VueJS - Composants

Vue Components sont l'une des fonctionnalités importantes de VueJS qui crée des éléments personnalisés, qui peuvent être réutilisés en HTML.

Travaillons avec un exemple et créons un composant, qui donnera une meilleure compréhension du fonctionnement des composants avec VueJS.

Exemple

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript" src = "js/vue_component.js"></script>
   </body>
</html>

vue_component.js

Vue.component('testcomponent',{
   template : '<div><h1>This is coming from component</h1></div>'
});
var vm = new Vue({
   el: '#component_test'
});
var vm1 = new Vue({
   el: '#component_test1'
});

Dans le fichier .html, nous avons créé deux div avec id component_test et component_test1. dans le.jsci-dessus, deux instances Vue sont créées avec les identifiants div. Nous avons créé un composant commun à utiliser avec les deux instances de vue.

Pour créer un composant, voici la syntaxe.

Vue.component('nameofthecomponent',{ // options});

Une fois qu'un composant est créé, le nom du composant devient l'élément personnalisé et le même peut être utilisé dans l'élément d'instance Vue créé, c'est-à-dire à l'intérieur du div avec les ids component_test et component_test1.

dans le .js file, nous avons utilisé un composant de test comme nom du composant et le même nom est utilisé comme élément personnalisé à l'intérieur des divs.

Exemple

<div id = "component_test">
   <testcomponent></testcomponent>
</div>
<div id = "component_test1">
   <testcomponent></testcomponent>
</div>

Dans le composant créé dans le .jsfichier, nous avons ajouté un modèle auquel nous avons attribué un code HTML. C'est une façon deregistering a global component, qui peut faire partie de n'importe quelle instance de vue, comme indiqué dans le script suivant.

Vue.component('testcomponent',{
   template : '<div><h1>This is coming from component</h1></div>'
});

Lors de l'exécution, la même chose sera reflétée dans le navigateur.

Les composants reçoivent la balise d'élément personnalisée, c'est-à-dire <testcomponent></testcomponent>. Cependant, lorsque nous inspectons la même chose dans le navigateur, nous ne remarquerons pas la balise personnalisée en HTML brut présent dans le modèle, comme indiqué dans la capture d'écran suivante.

Nous avons également intégré directement les composants à l'instance vue, comme indiqué dans le script suivant.

var vm = new Vue({
   el: '#component_test',
   components:{
      'testcomponent': {
         template : '<div><h1>This is coming from component</h1></div>'
      }
   }
});

C'est appelé local registration et les composants feront partie uniquement de l'instance de vue créée.

Jusqu'à présent, nous avons vu le composant de base avec les options de base. Maintenant, ajoutons d'autres options telles que des données et des méthodes. Tout comme l'instance Vue a des données et des méthodes, le composant partage également la même chose. Par conséquent, nous allons étendre le code, que nous avons déjà vu avec des données et des méthodes.

Exemple

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript" src = "js/vue_component.js"></script>
   </body>
</html>

vue_component.js

Vue.component('testcomponent',{
   template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
   data: function() {
      return {
         name : "Ria"
      }
   },
   methods:{
      changename : function() {
         this.name = "Ben";
      },
      originalname: function() {
         this.name = "Ria";
      }
   }
});
var vm = new Vue({
   el: '#component_test'
});
var vm1 = new Vue({
   el: '#component_test1'
});

dans le .jsci-dessus, nous avons ajouté des données qui sont une fonction, qui renvoie un objet. L'objet a une propriété de nom, qui reçoit la valeur «Ria». Ceci est utilisé dans le modèle suivant.

template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',

En dépit d'avoir des données en tant que fonction dans les composants, nous pouvons utiliser ses propriétés de la même manière que nous utilisons avec une instance de Vue directe. En outre, il existe deux méthodes ajoutées, changename et originalname. Dans changename, nous modifions la propriété name, et dans originalname, nous la réinitialisons au nom d'origine.

Nous avons également ajouté deux événements sur le div, mouseover et mouseout. Les détails des événements seront discutés dans le chapitre Événements. Donc pour l'instant, les appels au survolchangename appels de méthode et de souris originalname méthode.

L'affichage de la même chose est montré dans le navigateur suivant.

Comme vu dans le navigateur ci-dessus, il affiche le nom attribué dans la propriété data, qui est le même nom. Nous avons également attribué un événement mouseover sur le div et également un mouseout. Voyons ce qui se passe lorsque nous survolons et sortons la souris.

Au survol de la souris, nous voyons que le nom du premier composant est changé en Ben, cependant, le second reste tel quel. C'est parce que le composant de données est une fonction et qu'il renvoie un objet. Ainsi, lorsqu'il est modifié à un endroit, il n'est pas écrasé dans d'autres cas.

Composants dynamiques

Les composants dynamiques sont créés à l'aide du mot-clé <component></component> et il est lié à l'aide d'une propriété comme indiqué dans l'exemple suivant.

Exemple

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <component v-bind:is = "view"></component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               view: 'component1'
            },
            components: {
               'component1': {
                  template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
               }
            }
         });
      </script>
   </body>
</html>

Production

Le composant dynamique est créé à l'aide de la syntaxe suivante.

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

Il a v-bind: is = "view" et une valeur vue lui est assignée. La vue est définie dans l'instance Vue comme suit.

var vm = new Vue({
   el: '#databinding',
   data: {
      view: 'component1'
   },
   components: {
      'component1': {
         template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
      }
   }
});

Une fois exécuté, le modèle Dynamic Component s'affiche dans le navigateur.