Vue.js Render Functions

Every Vue component applies a render function in the Vue.js application. Most of the time, the Vue compiler creates the Vue function. When we define a template on our component, the Vue compiler will process the contents of this template that will return a rendering function. The rendering function returns a virtual DOM node in the browser DOM that will be rendered by the Vue.

We have already seen the Vue components and their uses. Here, we are going to take an example to understand it more easily. Suppose if we have content that requires to be reusable across the project of Vue.js, then we can convert it as a component and use it.

Example: This example explains how we can use the Vue rendering function in the Vue.js application.

Index.html

Main.js

Output: After executing this code, we will get the output, as shown below:

Vue.js Render Functions

Now, if we want to reuse the component, we can do just printing it again in the div, as shown below:

Output: After executing this code, we will get output, as shown below:

Vue.js Render Functions

Let us do some changes in the component. Sometimes we don’t want the same text to be printed again and again. In this case, we are going to add some text inside the component, and see what happens after executing this program.

Example:

Output: After executing this program, we will get output, as shown below:

Vue.js Render Functions

In the output, we can see that the result remains same, it does not changed according to our need.

Vue component offers new attribute named slots that change the above result. So, it is required to add the slots inside the template.

Example: This example explains how we can use the slots in the Vue.js render function.

Index.html

Main.js

Output: After executing this code, we will get output, as shown below:

Vue.js Render Functions

In the above screenshot, we can see the added slot that takes the value to transfer inside the component.

Now, let’s consider how to change the color and font size of the text. We can do this with the help of render function. Render function helps to make the component dynamic and also help to pass the arguments using a similar component.

Example: This example explains how we can change the color and font size of the text in the Vue render function.

Index.html

Main.js

Output: After executing this code, we will get output, as shown below:

Vue.js Render Functions

Here, we need to define the two attributes in the element tag, which is id and style. The id defines the type of a component, whereas style is used to set the color and font size of the text.

Pin It on Pinterest

Share This