We now have a youtube channel. Subscribe!
Home
Vue.js

Vue.js | Render Function

Vue.js Render Function


Hello folks! Welcome back to a new section of our tutorial on Vue.js. In this tutorial post, we are going to be discussing about Vue.js Render Function.

We have seen components and their usage. For example, we have a content that needs to be reused all through the project. We can convert the same as a component and use it.

Example

Let us take a look at an example of a simple component and see what a render function has to do within it.

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

Let us consider the above code of a simple component that prints Hello World as shown in the following screenshot.

render_function

If we would like to reuse the component, we can do so by printing it again. For example,

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

Output

The output will be the following.

component_reuse

However, now we need few changes to the component. We don't want the same text to be printed. How can we change it? In case, we type something inside the component, will it be taken into consideration?

Example

Let us consider the following example and see what happens.

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

Output

The output stays the same as we had seen earlier. It doesn't change the text as wanted.

component_reuse


Component does provide something known as slots. Let us make use of it and see if we will get the desired results.

Example

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

Output

As seen in the above code, in the template we've included slot, therefore now it takes the value to send inside the component as shown in the following screenshot.

slot_example

Now, let us consider we want to change the color and fontsize. For example, currently we are using h1 tag and we want to change the html tag to p tag or div tag for the same component. How can we have the flexibility to perform so many changes?

We can do so with the support of the render function. Render function assists in making the component dynamic and use the way it is needed by keeping it simple and helping pass arguments making use of the same component.

Example

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

In the above example, we have changed the component and included the render function with props property via the following piece of code.

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

The props looks like the following.

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


We've defined a property called elementtype, which accepts attributes field of type string. Another required field, which mentions that the field is mandatory.

In the render function, we have made use of the elementtype property as shown in the following piece of code. 

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

Render function takes createElement as the argument and returns same. createElement creates the DOM element the same way as JavaScript. We've also split the elementtype on comma, via the values in the attrs field.

CreateElement is taking the first param as the elementtag to be created. It is passed to the component using the following piece of code.

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

The component need to take the props field as shown in the above code. It begins with : and the name of the props. Here, we are passing the element tag, color, fontsize, and the id of the element.

In render function, in createElement, we are splitting on comma, so that the first element is the elementtag, which is specified to the createElement as shown in the below piece of code.

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

a[0] from above code is the HTML element tag. The next parameter is the attributes for the element tag. They are defined in the attr field in the following piece of code.

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

We've defined two attributes for the element tag - id and style. To id, we are passing a[3], which is the value we have after splitting on comma. Using style, we've defined color and fontsize.

Last is the slot, that's the message we have specified in the component in the following piece of code.

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

We have defined the text to be printed in the createElement using the following piece of code.

this.$slots.default

It takes the default slot that is assigned in the component field.

Output

Following below is the output we get in the browser.

component_field

The element also show the structure. These are the components we have defined -

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


Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be discussing about Vue.js Reactivate Interface.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain