VueJS - İşleme İşlevi

Bileşenlerini ve kullanımını gördük. Örneğin, proje genelinde yeniden kullanılması gereken bir içeriğimiz var. Aynı şeyi bir bileşenle dönüştürebilir ve kullanabiliriz.

Basit bir bileşen örneğine bakalım ve render fonksiyonunun bunun içinde ne yapması gerektiğini görelim.

Misal

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

Aşağıdaki ekran görüntüsünde gösterildiği gibi Hello World yazdıran basit bir bileşen örneğini düşünün.

Şimdi, bileşeni yeniden kullanmak istersek, bunu tekrar yazdırarak yapabiliriz. Örneğin,

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

Ve çıktı aşağıdaki gibi olacaktır.

Ancak, şimdi bileşende bazı değişikliklere ihtiyacımız var. Aynı metnin basılmasını istemiyoruz. Nasıl değiştirebiliriz? Bileşenin içine bir şey yazmamız durumunda, dikkate alınacak mı?

Aşağıdaki örneği ele alalım ve ne olacağını görelim.

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

Çıktı, daha önce gördüğümüzle aynı kalır. Metni istediğimiz gibi değiştirmez.

Bileşen, slots. Kullanalım ve istediğimiz sonuçları alıp almayacağımızı görelim.

Misal

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

Yukarıdaki kodda görüldüğü gibi, şablona slot ekledik, bu nedenle artık aşağıdaki ekran görüntüsünde gösterildiği gibi bileşenin içine gönderilecek değeri alıyor.

Şimdi rengini ve boyutunu değiştirmek istediğimizi düşünelim. Örneğin, şu anda h1 etiketini kullanıyoruz ve HTML etiketini aynı bileşen için p etiketi veya div etiketi olarak değiştirmek istiyoruz. Bu kadar çok değişikliği gerçekleştirme esnekliğine nasıl sahip olabiliriz?

Bunu render fonksiyonu yardımıyla yapabiliriz. Oluşturma işlevi, bileşeni dinamik hale getirmeye ve onu ortak kılarak ve aynı bileşeni kullanarak bağımsız değişkenleri iletmeye yardımcı olarak gerektiği şekilde kullanmaya yardımcı olur.

Misal

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

Yukarıdaki kodda, bileşeni değiştirdik ve aşağıdaki kod parçasını kullanarak props özelliği ile render işlevini ekledik.

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

Sahne şuna benzer.

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

String türünün öznitelik alanını alan elementtype adında bir özellik tanımladık. Alanın zorunlu olduğunu belirten başka bir zorunlu alan.

Render işlevinde, aşağıdaki kod parçasında görüldüğü gibi elementtype özelliğini kullandık.

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

Oluşturma işlevi, bağımsız değişken olarak createElement öğesini alır ve aynı şeyi döndürür. CreateElement, DOM öğesini JavaScript'tekiyle aynı şekilde oluşturur. Ayrıca, attrs alanındaki değerleri kullanarak elementtype'ı virgülle böldük.

CreateElement, oluşturulacak elementtag olarak ilk parametreyi alıyor. Aşağıdaki kod parçası kullanılarak bileşene aktarılır.

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

Bileşenin, yukarıda gösterildiği gibi sahne alanını alması gerekir. Şununla başlar: ve sahne donanımının adı. Burada element etiketini, rengini, yazı tipi boyutunu ve elementin kimliğini aktarıyoruz.

Render işlevinde, createElement'te virgülle bölüyoruz, bu nedenle, aşağıdaki kod parçasında gösterildiği gibi createElemet'e verilen ilk öğe elementtag'dir.

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

a[0]html öğe etiketidir. Sonraki parametre, öğe etiketinin nitelikleridir. Aşağıdaki kod parçasındaki attr alanında tanımlanırlar.

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

Öğe etiketi için iki nitelik tanımladık - id ve style. İd'ye virgülle ayırdıktan sonra sahip olduğumuz değer olan [3] 'ü geçiyoruz. Stil kullanarak renk ve yazı tipi boyutunu tanımladık.

Sonuncusu yuvadır, bu, aşağıdaki kod parçasında bileşende verdiğimiz mesajdır.

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

Aşağıdaki kod parçasını kullanarak createElement içinde yazdırılacak metni tanımladık.

this.$slots.default

Bileşen alanında atanan varsayılanı alır.

Tarayıcıda aldığımız çıktı aşağıdadır.

Elemanlar ayrıca yapıyı gösterir. Bunlar tanımladığımız bileşenler -

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