VueJS - Componenti

Vue Components sono una delle caratteristiche importanti di VueJS che crea elementi personalizzati, che possono essere riutilizzati in HTML.

Lavoriamo con un esempio e creiamo un componente, che fornirà una migliore comprensione del funzionamento dei componenti con VueJS.

Esempio

<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'
});

Nel file .html, abbiamo creato due div con id component_test e component_test1. Nel.jsfile mostrati sopra, vengono create due istanze Vue con gli id ​​div. Abbiamo creato un componente comune da utilizzare con entrambe le istanze di visualizzazione.

Per creare un componente, la seguente è la sintassi.

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

Una volta creato un componente, il nome del componente diventa l'elemento personalizzato e lo stesso può essere utilizzato nell'elemento dell'istanza Vue creato, cioè all'interno del div con id component_test e component_test1.

Nel .js file, abbiamo utilizzato un componente di test come nome del componente e lo stesso nome viene utilizzato come elemento personalizzato all'interno dei div.

Esempio

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

Nel componente creato in .jsfile, abbiamo aggiunto un template a cui abbiamo assegnato un codice HTML. Questo è un modo diregistering a global component, che può essere parte di qualsiasi istanza di vue come mostrato nello script seguente.

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

All'esecuzione, lo stesso si rifletterà nel browser.

Ai componenti viene assegnato il tag dell'elemento personalizzato, ad es <testcomponent></testcomponent>. Tuttavia, quando ispezioniamo lo stesso nel browser, non noteremo il tag personalizzato in HTML semplice presente nel modello come mostrato nello screenshot seguente.

Abbiamo anche reso direttamente i componenti una parte dell'istanza di vue, come mostrato nello script seguente.

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

Questo è chiamato local registration e i componenti faranno parte solo dell'istanza vue creata.

Finora abbiamo visto il componente di base con le opzioni di base. Ora, aggiungiamo altre opzioni come dati e metodi ad esso. Proprio come l'istanza Vue ha dati e metodi, anche il componente condivide gli stessi. Quindi, estenderemo il codice, che abbiamo già visto con dati e metodi.

Esempio

<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'
});

Nel .jsfile sopra, abbiamo aggiunto dati che sono una funzione, che restituisce un oggetto. L'oggetto ha una proprietà name, a cui viene assegnato il valore "Ria". Viene utilizzato nel seguente modello.

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

Nonostante i dati come funzione nei componenti, possiamo usare le sue proprietà nello stesso modo in cui usiamo con l'istanza diretta di Vue. Inoltre, sono stati aggiunti due metodi, changename e originalname. In changename, stiamo cambiando la proprietà name, e in originalname la stiamo resettando al nome originale.

Abbiamo anche aggiunto due eventi sul div, mouseover e mouseout. I dettagli degli eventi saranno discussi nel capitolo Eventi. Quindi per ora, chiamate al passaggio del mousechangename chiamate al metodo e al mouseout originalname metodo.

La visualizzazione degli stessi è mostrata nel seguente browser.

Come si vede nel browser sopra, mostra il nome assegnato nella proprietà data, che è lo stesso nome. Abbiamo anche assegnato un evento mouseover sul div e anche un mouseout. Vediamo cosa succede quando si passa il mouse e si esce dal mouse.

Al passaggio del mouse, vediamo che il nome del primo componente è cambiato in Ben, tuttavia, il secondo rimane così com'è. Questo perché il componente dati è una funzione e restituisce un oggetto. Pertanto, quando viene modificato in un punto, lo stesso non viene sovrascritto in altri casi.

Componenti dinamici

I componenti dinamici vengono creati utilizzando la parola chiave <component></component> ed è associato utilizzando una proprietà come mostrato nell'esempio seguente.

Esempio

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

Produzione

Il componente dinamico viene creato utilizzando la seguente sintassi.

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

Ha v-bind: is = "view", e ad esso è assegnata una vista valore. La vista è definita nell'istanza di Vue come segue.

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

Quando viene eseguito, il modello Dynamic Component viene visualizzato nel browser.