VueJS - komponenty

Vue Components to jedna z ważnych funkcji VueJS, która tworzy niestandardowe elementy, które można ponownie wykorzystać w HTML.

Popracujmy na przykładzie i stwórzmy komponent, który pozwoli lepiej zrozumieć, jak komponenty współpracują z VueJS.

Przykład

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

W pliku .html utworzyliśmy dwa div o identyfikatorze component_test i component_test1. w.jspokazane powyżej, dwie instancje Vue są tworzone z identyfikatorami div. Stworzyliśmy wspólny komponent do użycia z obydwoma instancjami widoku.

Aby utworzyć komponent, postępuj zgodnie ze składnią.

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

Po utworzeniu komponentu nazwa komponentu staje się elementem niestandardowym i tego samego można użyć w utworzonym elemencie instancji Vue, tj. Wewnątrz elementu div z identyfikatorami component_test i component_test1.

w .js pliku, użyliśmy komponentu testowego jako nazwy komponentu i ta sama nazwa jest używana jako element niestandardowy wewnątrz elementów div.

Przykład

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

W komponencie utworzonym w .jsdodaliśmy szablon, do którego przypisaliśmy kod HTML. To jest sposóbregistering a global component, które można uczynić częścią dowolnej instancji vue, jak pokazano w poniższym skrypcie.

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

Po wykonaniu to samo zostanie odzwierciedlone w przeglądarce.

Komponenty otrzymują niestandardowy tag elementu, tj <testcomponent></testcomponent>. Jednak gdy sprawdzimy to samo w przeglądarce, nie zauważymy niestandardowego tagu w zwykłym kodzie HTML obecnego w szablonie, jak pokazano na poniższym zrzucie ekranu.

Uczyniliśmy również komponenty bezpośrednio częścią instancji vue, jak pokazano w poniższym skrypcie.

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

To się nazywa local registration a komponenty będą częścią tylko utworzonej instancji vue.

Do tej pory widzieliśmy podstawowy komponent z podstawowymi opcjami. Teraz dodajmy do niego więcej opcji, takich jak dane i metody. Podobnie jak instancja Vue ma dane i metody, komponent również udostępnia te same. Dlatego rozszerzymy kod, który widzieliśmy już z danymi i metodami.

Przykład

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

w .jsplik powyżej, dodaliśmy dane, które są funkcją, która zwraca obiekt. Obiekt ma właściwość name, której przypisywana jest wartość „Ria”. Jest to używane w następującym szablonie.

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

Pomimo posiadania danych jako funkcji w komponentach, możemy używać ich właściwości w taki sam sposób, jak używamy z bezpośrednią instancją Vue. Dodane są również dwie metody, nazwa zmiany i nazwa_oryginalna. W changename zmieniamy właściwość name, aw originalname resetujemy ją z powrotem do oryginalnej nazwy.

Dodaliśmy również dwa zdarzenia dotyczące div, mouseover i mouseout. Szczegóły wydarzeń zostaną omówione w rozdziale Wydarzenia. Na razie więc woła kursor myszychangename wywołania metody i myszy originalname metoda.

Wyświetlanie tego samego jest wyświetlane w poniższej przeglądarce.

Jak widać w powyższej przeglądarce, wyświetla nazwę przypisaną we właściwości danych, która jest tą samą nazwą. Przypisaliśmy również zdarzenie najechania myszą na element div, a także wyprowadzenie myszy. Zobaczmy, co się stanie, gdy najedziemy kursorem myszy i wyprowadzimy kursor myszy.

Po najechaniu myszą widzimy, że nazwa pierwszego komponentu zostaje zmieniona na Ben, jednak druga pozostaje taka, jaka jest. Dzieje się tak, ponieważ komponent danych jest funkcją i zwraca obiekt. Tak więc, gdy zostanie zmieniony w jednym miejscu, to samo nie zostanie nadpisane w innych przypadkach.

Komponenty dynamiczne

Komponenty dynamiczne są tworzone za pomocą słowa kluczowego <component></component> i jest powiązany przy użyciu właściwości, jak pokazano w poniższym przykładzie.

Przykład

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

Wynik

Komponent dynamiczny jest tworzony przy użyciu następującej składni.

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

Ma v-bind: is = ”view” i przypisany jest do niego widok wartości. Widok jest definiowany w instancji Vue w następujący sposób.

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

Po uruchomieniu plik template Dynamic Component jest wyświetlany w przeglądarce.