前面我们已经学习了组件和它的用法。 例如，有一个需要在整个项目中重用的内容。 我们可以将其转换为组件并使用它。
下面来看看一个简单组件的例子，看看渲染函数在它里面做什么。
示例
创建一个文件：render_function.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs渲染函数</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 : '<h2>Hello World</h2>',
data: function() {
},
methods:{
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>
考虑上面一个打印"Hello World"的简单组件的例子，在浏览器输出效果如下图所示 -
现在，如果想重新使用组件，可以通过重新打印来实现。 例如，
<div id = "component_test">
<testcomponent></testcomponent>
<testcomponent></testcomponent>
<testcomponent></testcomponent>
<testcomponent></testcomponent>
</div>
在浏览器输出效果如下图所示 -
但是，现在需要对组件进行一些更改。 我们不希望打印相同的文本。那么如何修改它？ 如果在组件内部输入一些东西，是否会考虑到？
考虑下面的例子，看看会输出什么效果 -
<div id = "component_test">
<testcomponent>Hello Java</testcomponent>
<testcomponent>Hello Ruby</testcomponent>
<testcomponent>Hello Linux</testcomponent>
<testcomponent>Hello Python</testcomponent>
</div>
输出结果仍与我们前面看到的一样。 它不会改变我们需要的文字值。如下 -
组件提供了一些被称为插槽的东西。在下面的示例中使用它，看看是否得到了预期的结果。
创建一个文件：render_function-slots.html
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent>Hello Java</testcomponent>
<testcomponent>Hello Ruby</testcomponent>
<testcomponent>Hello Linux</testcomponent>
<testcomponent>Hello Python</testcomponent>
</div>
<script type = "text/javascript">
Vue.component('testcomponent',{
template : '<h2><slot></slot></h2>',
data: function() {
},
methods:{
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>
如上面的代码所示，在模板中添加了插槽，因此现在需要在组件内部发送值，如以下屏幕截图所示。
现在，假设想要改变颜色和大小。 例如，目前使用的是h2标签，希望将HTML标签更改为同一个组件的p标签或div标签。如何能够灵活地进行如此多的改变？
可以在渲染函数的帮助下做到这一点。渲染函数有助于使组件动态化，并通过保持通用性和使用相同组件传递参数来使用它所需的方式。
示例
创建一个文件：render_function-style.html -
<html>
<head>
<title>VueJs渲染函数样式</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent :elementtype = "'div,red,25,div1'">Hello Java</testcomponent>
<testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Ruby</testcomponent>
<testcomponent :elementtype = "'p,blue,25,ptag'">Hello C#</testcomponent>
<testcomponent :elementtype = "'div,green,25,divtag'">Hello Python</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>
在上面的代码中，我们已经改变了组件，并使用下面的一段代码添加了带有props属性的渲染函数。
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
}
}
});
props属性如下所示。
props:{
elementtype:{
attributes:String,
required:true
}
}
已经定义了一个名为elementtype的属性，它接受string类型的属性字段。 另一个必填字段，其中提到该字段是强制性的。
在渲染函数中，使用了elementtype属性，如下面的一段代码所示。
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
)
}
渲染函数将createElement作为参数并返回相同的值。 CreateElement和JavaScript中一样创建DOM元素。还用逗号分隔元素类型，使用attrs字段中的值。
CreateElement将第一个参数作为要创建的元素标签。它使用下面的一段代码传递给组件。
<testcomponent :elementtype = "'div,red,25,div1'">Hello Java</testcomponent>
该组件需要采取props字段如上所示。 它开始于：props的名字。 在这里传递元素标签，颜色，字体大小和元素的ID。
在渲染函数中，在createElement中，使用逗号进行分割，所以第一个元素是elementtag，它被赋给了createElemet，如下面的一段代码所示。
return createElement(
a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)
a[0]是html元素标记。 下一个参数是元素标签的属性。 它们在attr字段中定义在下面的一段代码中。
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
我们已经定义了元素标签的id和style两个属性。 对于id，传递了a[3]，这是在逗号分割后的值。 使用样式定义了颜色和字体大小。
最后是slot，下面的代码片段中给出的消息。
<testcomponent :elementtype = "'div,red,25,div1'">Hello Java</testcomponent>
使用下面的一段代码定义了要在createElement中打印的文本。
this.$slots.default
它采用组件字段中分配的默认值。以下是在浏览器中获得的输出。
元素也显示结构。下面是定义的组件 -
<div id = "component_test">
<testcomponent :elementtype = "'div,red,25,div1'">Hello Java</testcomponent>
<testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Ruby</testcomponent>
<testcomponent :elementtype = "'p,blue,25,ptag'">Hello C#</testcomponent>
<testcomponent :elementtype = "'div,green,25,divtag'">Hello Python</testcomponent>
</div>