VueJS - Komponenten

Vue Components sind eine der wichtigen Funktionen von VueJS, mit denen benutzerdefinierte Elemente erstellt werden, die in HTML wiederverwendet werden können.

Lassen Sie uns mit einem Beispiel arbeiten und eine Komponente erstellen, die ein besseres Verständnis für die Funktionsweise von Komponenten mit VueJS vermittelt.

Beispiel

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

In der HTML-Datei haben wir zwei div mit id erstellt component_test und component_test1. In dem.jsIn den oben gezeigten Dateien werden zwei Vue-Instanzen mit den Div-IDs erstellt. Wir haben eine gemeinsame Komponente erstellt, die für beide Ansichtsinstanzen verwendet werden kann.

Um eine Komponente zu erstellen, folgt die folgende Syntax.

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

Sobald eine Komponente erstellt wurde, wird der Name der Komponente zum benutzerdefinierten Element und kann auch für das erstellte Vue-Instanzelement verwendet werden, dh innerhalb des div mit IDs component_test und component_test1.

In dem .js Datei haben wir eine Testkomponente als Namen der Komponente verwendet und der gleiche Name wird als benutzerdefiniertes Element innerhalb der divs verwendet.

Beispiel

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

In der in der erstellten Komponente .jsDatei haben wir eine Vorlage hinzugefügt, der wir einen HTML-Code zugewiesen haben. Dies ist ein Weg vonregistering a global component, die wie im folgenden Skript gezeigt Teil jeder Vue-Instanz sein kann.

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

Bei der Ausführung wird dasselbe im Browser angezeigt.

Die Komponenten erhalten das benutzerdefinierte Element-Tag, d. H. <testcomponent></testcomponent>. Wenn wir jedoch dasselbe im Browser überprüfen, werden wir das benutzerdefinierte Tag in einfachem HTML in der Vorlage nicht bemerken, wie im folgenden Screenshot gezeigt.

Wir haben die Komponenten auch direkt zu einem Teil der vue-Instanz gemacht, wie im folgenden Skript gezeigt.

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

Das nennt man local registration und die Komponenten sind nur ein Teil der erstellten vue-Instanz.

Bisher haben wir die Grundkomponente mit den Grundoptionen gesehen. Fügen wir nun einige weitere Optionen wie Daten und Methoden hinzu. So wie die Vue-Instanz Daten und Methoden hat, teilt auch die Komponente diese. Daher werden wir den Code, den wir bereits gesehen haben, um Daten und Methoden erweitern.

Beispiel

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

In dem .jsDatei oben haben wir Daten hinzugefügt, die eine Funktion ist, die ein Objekt zurückgibt. Das Objekt hat eine Namenseigenschaft, der der Wert 'Ria' zugewiesen ist. Dies wird in der folgenden Vorlage verwendet.

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

Obwohl Daten als Funktion in Komponenten vorhanden sind, können wir ihre Eigenschaften genauso verwenden wie bei der direkten Vue-Instanz. Außerdem wurden zwei Methoden hinzugefügt: Changename und Originalname. In Changename ändern wir die Name-Eigenschaft und in Originalname setzen wir sie auf den ursprünglichen Namen zurück.

Wir haben auch zwei Ereignisse für div hinzugefügt, mouseover und mouseout. Die Details der Ereignisse werden im Kapitel Ereignisse erläutert. Also vorerst Mouseover-Anrufechangename Methoden- und Mouseout-Aufrufe originalname Methode.

Die Anzeige derselben wird im folgenden Browser angezeigt.

Wie im obigen Browser zu sehen ist, wird der in der Dateneigenschaft zugewiesene Name angezeigt, der denselben Namen hat. Wir haben auch ein Mouseover-Ereignis auf dem Div und auch ein Mouseout zugewiesen. Mal sehen, was passiert, wenn wir Mouseover und Mouseout machen.

Beim Mouseover sehen wir, dass der Name der ersten Komponente in Ben geändert wird, die zweite bleibt jedoch unverändert. Dies liegt daran, dass die Datenkomponente eine Funktion ist und ein Objekt zurückgibt. Wenn es an einer Stelle geändert wird, wird es in anderen Fällen nicht überschrieben.

Dynamische Komponenten

Dynamische Komponenten werden mit dem Schlüsselwort erstellt <component></component> und es wird unter Verwendung einer Eigenschaft gebunden, wie im folgenden Beispiel gezeigt.

Beispiel

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

Ausgabe

Die dynamische Komponente wird mit der folgenden Syntax erstellt.

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

Es hat v-bind: is = ”view” und ihm wird eine Werteansicht zugewiesen. Die Ansicht wird in der Vue-Instanz wie folgt definiert.

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

Bei Ausführung die Vorlage Dynamic Component wird im Browser angezeigt.