VueJS - funkcja renderowania

Widzieliśmy komponenty i ich zastosowanie. Na przykład mamy treść, którą należy ponownie wykorzystać w całym projekcie. Możemy przekonwertować to samo co komponent i użyć go.

Rzućmy okiem na przykład prostego komponentu i zobaczmy, co robi w nim funkcja renderująca.

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>
      <script type = "text/javascript">
         Vue.component('testcomponent',{
            template : '<h1>Hello World</h1>',
            data: function() {
            },
            methods:{
            }
         });
         var vm = new Vue({
            el: '#component_test'
         });
      </script>
   </body>
</html>

Rozważ powyższy przykład prostego komponentu, który drukuje Hello World, jak pokazano na poniższym zrzucie ekranu.

Teraz, jeśli chcemy ponownie użyć komponentu, możemy to zrobić, po prostu drukując go ponownie. Na przykład,

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

Wynik będzie następujący.

Jednak teraz potrzebujemy pewnych zmian w komponencie. Nie chcemy drukować tego samego tekstu. Jak możemy to zmienić? W przypadku wpisania czegoś wewnątrz komponentu, czy zostanie to uwzględnione?

Rozważmy następujący przykład i zobaczmy, co się stanie.

<div id = "component_test">
   <testcomponent>Hello Jai</testcomponent>
   <testcomponent>Hello Roy</testcomponent>
   <testcomponent>Hello Ria</testcomponent>
   <testcomponent>Hello Ben</testcomponent>
</div>

Wynik pozostaje taki sam, jak widzieliśmy wcześniej. Nie zmienia tekstu tak, jak chcemy.

Component zapewnia coś, co nazywa się as slots. Skorzystajmy z tego i zobaczmy, czy uzyskamy pożądane rezultaty.

Przykład

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent>Hello Jai</testcomponent>
         <testcomponent>Hello Roy</testcomponent>
         <testcomponent>Hello Ria</testcomponent>
         <testcomponent>Hello Ben</testcomponent>
      </div>
      <script type = "text/javascript">
         Vue.component('testcomponent',{
            template : '<h1><slot></slot></h1>',
            data: function() {
            },
            methods:{
            }
         });
         var vm = new Vue({
            el: '#component_test'
         });
      </script>
   </body>
</html>

Jak widać na powyższym kodzie, w szablonie dodaliśmy slot, dlatego teraz przyjmuje wartość do wysłania do komponentu, jak pokazano na poniższym zrzucie ekranu.

Zastanówmy się teraz, czy chcemy zmienić kolor i rozmiar. Na przykład obecnie używamy tagu h1 i chcemy zmienić tag HTML na znacznik p lub tag div dla tego samego komponentu. Jak możemy mieć elastyczność, aby przeprowadzić tak wiele zmian?

Możemy to zrobić za pomocą funkcji renderującej. Funkcja renderowania pomaga uczynić składnik dynamicznym i używać go tak, jak jest to wymagane, utrzymując go jako wspólny i pomagając w przekazywaniu argumentów przy użyciu tego samego składnika.

Przykład

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
         <testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent>
         <testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent>
         <testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent>
      </div>
      <script type = "text/javascript">
         Vue.component('testcomponent',{
            render :function(createElement){
               var a = this.elementtype.split(",");
               return createElement(a[0],{
                  attrs:{
                     id:a[3],
                     style:"color:"+a[1]+";font-size:"+a[2]+";"
                  }
               },
               this.$slots.default
               )
            },
            props:{
               elementtype:{
                  attributes:String,
                  required:true
               }
            }
         });
         var vm = new Vue({
            el: '#component_test'
         });
      </script>
   </body>
</html>

W powyższym kodzie zmieniliśmy komponent i dodaliśmy funkcję render z właściwością props używając poniższego fragmentu kodu.

Vue.component('testcomponent',{
   render :function(createElement){
      var a = this.elementtype.split(",");
      return createElement(a[0],{
         attrs:{
            id:a[3],
            style:"color:"+a[1]+";font-size:"+a[2]+";"
         }
      },
      this.$slots.default
      )
   },
   props:{
      elementtype:{
         attributes:String,
         required:true
      }
   }
});

Rekwizyty wyglądają następująco.

props:{
   elementtype:{
      attributes:String,
      required:true
   }
}

Zdefiniowaliśmy właściwość o nazwie elementtype, która przyjmuje pole atrybutów typu string. Kolejne wymagane pole, które wspomina, że pole jest obowiązkowe.

W funkcji renderowania wykorzystaliśmy właściwość elementtype, jak widać na poniższym fragmencie kodu.

render :function(createElement){
   var a = this.elementtype.split(",");
   return createElement(a[0],{
      attrs:{
         id:a[3],
         style:"color:"+a[1]+";font-size:"+a[2]+";"
      }
   },
   this.$slots.default
   )
}

Funkcja renderująca przyjmuje createElement jako argument i zwraca to samo. CreateElement tworzy element DOM w taki sam sposób, jak w JavaScript. Podzieliliśmy również typ elementu przecinkiem, używając wartości z pola atrs.

CreateElement przyjmuje pierwszy parametr jako element do utworzenia. Jest przekazywany do komponentu przy użyciu następującego fragmentu kodu.

<testcomponent  :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>

Komponent musi zająć pole rekwizytów, jak pokazano powyżej. Zaczyna się od: i nazwy rekwizytów. Tutaj przekazujemy tag elementu, kolor, rozmiar czcionki i identyfikator elementu.

W funkcji render, w createElement, dzielimy się przecinkami, więc pierwszym elementem jest elementtag, który jest przekazywany do createElemet, jak pokazano na poniższym fragmencie kodu.

return createElement(
   a[0],{
      attrs:{
         id:a[3],
         style:"color:"+a[1]+";font-size:"+a[2]+";"
      }
   },
   this.$slots.default
)

a[0]to znacznik elementu html. Następnym parametrem są atrybuty znacznika elementu. Są zdefiniowane w polu attr w poniższym fragmencie kodu.

attrs:{
   id:a[3],
   style:"color:"+a[1]+";font-size:"+a[2]+";"
}

Zdefiniowaliśmy dwa atrybuty dla tagu elementu - id i style. Do id przekazujemy [3], czyli wartość, którą mamy po rozdzieleniu przecinkiem. Używając stylu, zdefiniowaliśmy kolor i rozmiar czcionki.

Ostatni to slot, czyli wiadomość, którą podaliśmy w komponencie w poniższym fragmencie kodu.

<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>

Zdefiniowaliśmy tekst do wydrukowania w elemencie createElement za pomocą następującego fragmentu kodu.

this.$slots.default

Przyjmuje wartość domyślną przypisaną w polu komponentu.

Poniżej przedstawiono dane wyjściowe, które otrzymujemy w przeglądarce.

Elementy pokazują również strukturę. Oto komponenty, które zdefiniowaliśmy -

<div id = "component_test">
   <testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
   <testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent>
   <testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent>
   <testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent>
</div>