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