The render function allows us to make changes inside the reusable component. for example,we need to reuse a component many times in various parts of the application. we can very well call this render function.
Sometimes, we will call same component multiple times in the application.But we also need to pass different values within the same component.
we can make use of slot functionality in vuejs.
<slot>
<slot>
let us say we want to print 'Dear Name' by using simple component.But in future we want to change dear name in the component with the following.
<html>
<head>
<title>
<script type=text/javascript src=js/vue.js><script>
<head>
<body>
<div id=dvcomponent>
<repeatcomponent><
<repeatcomponent><br>
<div>
<script type=text/javascript>
vue.component('reusablecomponent',{
template:'<h1>Dear All<h1>'
}
)
var vm=new vue({
el:'#dvevents',
data: {
},
methods:{
},
computed:{
},
});
<script>
<body>
<html>
After running the above code , you will see "Dear ALL" in the browser. Now if you reuse the above component, you will see the same content will be printed again and again.
<div id=dvcomponent>
<repeatcomponent><
<repeatcomponent><br>
<div>
Output: Dear Muruga Dear Kanda Dear Karthigeya Dear Senthil Dear Vel
<div id=dvcomponent>
<repeatcomponent>< Dear Muruga<repeatcomponent><br>
<repeatcomponent>< Dear Kanda<repeatcomponent><br>
<repeatcomponent>< Dear Karthigeya<repeatcomponent><br>
<repeatcomponent>< Dear Senthil<repeatcomponent><br>
<repeatcomponent>< Dear Vel<repeatcomponent><br>
<div>
After running the above script, you will see following
output:
Dear ALL
Dear ALL
Dear ALL
Dear ALL
Dear ALL
To display the given input inside the component, we can make use of slot in vuejs.
template : "'<h1><slot><slot><h1>'",
<div id=dvcomponent>
<repeatcomponent>< Dear Muruga<repeatcomponent><br>
<repeatcomponent>< Dear Kanda<repeatcomponent><br>
<repeatcomponent>< Dear Karthigeya<repeatcomponent><br>
<repeatcomponent>< Dear Senthil<repeatcomponent><br>
<repeatcomponent>< Dear Vel<repeatcomponent><br>
<div>
Again we will run the above script and check the output in the browser.
Output:
output:
Dear Muruga
Dear Kanda
Dear Karthigeya
Dear Senthil
Dear Vel
Now we will see How to use Render Function in Vuejs. Let us consider the following scenario of changing the color and size of the output. Also we need to add new tag like div or p tag etc. This we can achieve by using render function in vuejs.
<html>
<head>
<title>
<script type=text/javascript src=js/vue.js><script>
<head>
<body>
<div id=dvcomponent>
<repeatcomponent :elementtype="div,blue,26,div1">< Dear Muruga<repeatcomponent><br>
<repeatcomponent :elementtype="h1,brown,26,div2">< Dear Kanda<repeatcomponent><br>
<repeatcomponent :elementtype="p,blue,26,ptemp">< Dear Karthigeya<repeatcomponent><br>
<div>
<script type=text/javascript>
vue.component('reusablecomponent',
{
render:function(createElement)
{
var str= this.elementtype.split(",")l
return createElement(a[0],
{
attrs:{
id:a[3],
style:"color:" + a[1] + ";font-size:" + a[2] + ";"
}
},
this.$slots.default
)//createelement
},//renderfunction
props:{
elementtype:
{
attributes:string,
required:true
}
}
});//component
<body>
<html>