介绍

本篇同样是作为Vue的学习篇，要介绍的是Vue的Render函数，笔者也是初学者，如果遇到不对的或者有好的建议可以到评论区留言分享！

从一个示例开始

我们已经看到了组件及其用法。例如，我们有一个需要在整个项目中重用的内容。我们可以将其转换为组件并使用它。

让我们看一个简单组件的示例，看看render函数在其中的作用：

如下面的屏幕截图所示:

现在，如果我们想重用组件，我们可以通过复制粘贴来完成：

你看到的将是四个一模一样的

但是，现在我们需要对组件进行一些更改。我们不希望打印相同的文本。我们怎样才能改变它？如果我们在组件内部键入内容，是否可以尝试？

让我们尝试以下示例，看看会发生什么？

实际上你看到的结果并没有发生变化，但是组件确实提供了称为插槽（slots）的东西。让我们利用它，看看我们是否得到了预期的结果。现在代码是这样的：

查看浏览器结果：

现在，让我们考虑一下我们想要改变颜色和大小。例如，目前我们使用的是h1标签，我们希望将HTML标签更改为同一组件的p标签或div标签。我们怎样才能灵活地进行这么多改变？我们可以在Render函数的帮助下完成，Render函数通过使组件保持通用并帮助使用相同组件传递参数，帮助组件使用它所需的方式动态化。看下面一段代码：

在上面的代码中，我们使用以下代码更改了组件并使用props属性添加了render函数。

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
 }
 }
});

我们定义了一个名为elementtype的属性，它接受string类型的属性字段。另一个 required，标记该字段是必须的。在render函数中，我们使用了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
 )
}

Render函数将createElement作为参数并返回相同的值。CreateElement以与JavaScript相同的方式创建DOM元素。我们还使用attrs字段中的值在逗号上拆分元素类型。CreateElement将第一个参数作为要创建的元素标签。它使用以下代码传递给组件：

<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>

组件需要采用如上所示的props字段。它以：和props的名称开头。在这里，我们传递元素标签，颜色，fontsize和元素的id。在render函数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字段中定义。

<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>

我们使用以下代码定义了要在createElement中打印的文本。

this.$slots.default

它采用组件字段中指定的默认值。以下是我们在浏览器中获得的输出：

总结

以上就是通过一个简单的示例来学习Vue render函数的使用，更加复杂的使用方式还需要时间和实践，配合业务编写更加复杂的组件结构！