Vue.js Render Function

What is Vue.js Render Function ?


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

We will consider an example of a simple component and see what the render function has to do within it.


render.html

From the above example of a simple component that prints Hello World!!! as shown in the image.

Output:

Now, if we want to reuse the component, we can do so by just printing it again and again. For example,

<div id = "test_component"> <testcomponent></testcomponent> <testcomponent></testcomponent> <testcomponent></testcomponent> <testcomponent></testcomponent> . <testcomponent></testcomponent> </div>

And the output will be as.


Now, if we need some changes to the component. We don’t want the same text to be printed. How can we change it? In this case, we have to type something inside the component, will it be taken into consideration?

Let us understand with the help of following example and see what happens.

<div id = "test_component"> <testcomponent>Hello Raj!</testcomponent> <testcomponent>Hello Jai!</testcomponent> <testcomponent>Hello Mia!</testcomponent> <testcomponent>Hello Vij!</testcomponent> . <testcomponent>Hello Ian!</testcomponent> </div>

The output remains the same as we had seen earlier. It does not change the text as we have wanted.



So we have to use slots. Component does provide something called as slots. Now, we will use it see if we get the desired results.


What Are Slots?


Slots are a mechanism for Vue components that allows you to compose your components in a way other than the strict parent-child relationship. Slots give you an outlet to place content in new places or make components more generic. The best way to understand them is to see them in action. Let’s start with a simple example:

// frame.vue <template> . <div class="frame"> . <slot></slot> . </div> </template>


Slot Content


Slots are a powerful tool for creating reusable components in Vue.js. Vue implements a content distribution API inspired by the Web Components spec draft, using the <slot> element to serve as distribution outlets for content.


renderslot.html

As seen in the above code, in the template we have added slot, hence now it takes the value to send inside the component as shown in the output.

Output:






If you have any queries regarding this blog or need any help you can contact us on: contact@codersarts.com

Vue.js, Vue.js Rendering, Vue.js Render, Vue.js Rendering Assignment, Vue.js Assignment Help, Vue.js Project, Vue.js Slots

Contact Us

Tel: (+91) 0120  4118730  

Time :   10 : 00  AM -  08 : 00 PM IST 

Registered address: G-69, Sector 63, 

 Noida - 201301, India

We Provide Services Across The different countries

USA    Australia   Canada   UK    UAE    Singapore   New Zealand    Malasia   India   Ireland   Germany

CodersArts is a Product by Sofstack Technology Solutions Pvt. Ltd.

  • CodersArts | Linkedin
  • Instagram