VueJS - रेंडर फ़ंक्शन

हमने घटकों और इसके उपयोग को देखा है। उदाहरण के लिए, हमारे पास एक ऐसी सामग्री है जिसे परियोजना में पुन: उपयोग करने की आवश्यकता है। हम इसे एक घटक के रूप में बदल सकते हैं और इसका उपयोग कर सकते हैं।

आइए एक सरल घटक के एक उदाहरण पर एक नज़र डालें और देखें कि रेंडर फ़ंक्शन को इसके भीतर क्या करना है।

उदाहरण

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

एक साधारण घटक के उपरोक्त उदाहरण पर विचार करें जो हैलो वर्ल्ड को प्रिंट करता है जैसा कि निम्नलिखित स्क्रीनशॉट में दिखाया गया है।

अब, यदि हम घटक का पुन: उपयोग करना चाहते हैं, तो हम इसे फिर से मुद्रित करके ऐसा कर सकते हैं। उदाहरण के लिए,

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

और आउटपुट निम्नलिखित होगा।

हालाँकि, अब हमें घटक में कुछ बदलाव करने की आवश्यकता है। हम नहीं चाहते कि एक ही पाठ छपे। हम इसे कैसे बदल सकते हैं? मामले में, हम घटक के अंदर कुछ टाइप करते हैं, क्या इसे ध्यान में रखा जाएगा?

आइए हम निम्नलिखित उदाहरण पर विचार करें और देखें कि क्या होता है।

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

आउटपुट वैसा ही रहता है जैसा हमने पहले देखा था। जैसा हम चाहते हैं, यह पाठ को बदलता नहीं है।

घटक कुछ के रूप में बुलाया प्रदान करता है slots। चलो इसका उपयोग करें और देखें कि क्या हमें वांछित परिणाम मिलते हैं।

उदाहरण

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

जैसा कि उपरोक्त कोड में देखा गया है, टेम्पलेट में हमने स्लॉट जोड़ा है, इसलिए अब यह घटक के अंदर भेजने के लिए मान लेता है जैसा कि निम्नलिखित स्क्रीनशॉट में दिखाया गया है।

अब, हम विचार करें कि हम रंग और आकार बदलना चाहते हैं। उदाहरण के लिए, वर्तमान में हम h1 टैग का उपयोग कर रहे हैं और हम उसी घटक के लिए HTML टैग को p टैग या div टैग में बदलना चाहते हैं। इतने सारे बदलावों को करने के लिए हमारे पास लचीलापन कैसे हो सकता है?

रेंडर फंक्शन की मदद से हम ऐसा कर सकते हैं। रेंडर फ़ंक्शन घटक को गतिशील बनाने में मदद करता है और जिस तरह से इसे सामान्य रखकर आवश्यक है और उसी घटक का उपयोग करके पास के तर्कों को उपयोग करने में मदद करता है।

उदाहरण

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

उपरोक्त कोड में, हमने घटक को बदल दिया है और कोड के निम्नलिखित टुकड़े का उपयोग करके प्रॉप्स संपत्ति के साथ रेंडर फ़ंक्शन को जोड़ा है।

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

प्रॉप्स निम्नलिखित की तरह दिखते हैं।

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

हमने एलीमेंट टाइप नामक एक प्रॉपर्टी को परिभाषित किया है, जो टाइप स्ट्रिंग के गुण क्षेत्र लेता है। एक अन्य आवश्यक फ़ील्ड, जिसमें उल्लेख किया गया है कि फ़ील्ड अनिवार्य है।

रेंडर फ़ंक्शन में, हमने एलिमेंट प्रॉपर्टी का उपयोग किया है जैसा कि कोड के निम्नलिखित टुकड़े में देखा गया है।

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

रेंडर फंक्शन createElement को तर्क के रूप में लेता है और वही लौटाता है। CreateElement उसी तरह DOM तत्व को बनाता है जैसे कि JavaScript। हमने एट्र्स फ़ील्ड में मानों का उपयोग करते हुए, तत्व को अल्पविराम पर विभाजित किया है।

CreateElement पहले परम को निर्माण के रूप में ले रहा है। यह निम्नलिखित कोड कोड का उपयोग करके घटक को दिया जाता है।

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

जैसा कि ऊपर दिखाया गया है, घटक को सहारा क्षेत्र को लेना होगा। इसके साथ शुरू होता है: और प्रॉप्स का नाम। यहां, हम तत्व टैग, रंग, फोंटाइज़ और तत्व की आईडी पास कर रहे हैं।

फंक्शन रेंडर में, createElement में, हम अल्पविराम पर विभाजन कर रहे हैं, इसलिए पहला तत्व एलीमेंट है, जो createElemet को दिया जाता है जैसा कि कोड के निम्नलिखित भाग में दिखाया गया है।

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

a[0]HTML एलिमेंट टैग है। अगला पैरामीटर तत्व टैग के लिए विशेषता है। वे कोड के निम्नलिखित टुकड़े में एटर फील्ड में परिभाषित किए गए हैं।

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

हमने तत्व टैग के लिए दो विशेषताओं को परिभाषित किया है - id तथा style। आईडी करने के लिए, हम एक [3] पास कर रहे हैं, जो कि कॉमा पर विभाजित होने के बाद हमारे पास मूल्य है। शैली का उपयोग करते हुए, हमने रंग और फ़ॉन्ट को परिभाषित किया है।

अंतिम स्लॉट है, यह वह संदेश है जो हमने कंपोनेंट में कोड के निम्नलिखित टुकड़े में दिया है।

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

हमने टेक्स्ट को कोड के निम्नलिखित टुकड़े का उपयोग करके createElement में मुद्रित करने के लिए परिभाषित किया है।

this.$slots.default

यह घटक फ़ील्ड में निर्दिष्ट डिफ़ॉल्ट लेता है।

इसके बाद ब्राउजर में हमें आउटपुट मिलता है।

तत्व संरचना को भी दिखाते हैं। ये घटक हैं जिन्हें हमने परिभाषित किया है -

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