vue render用法（初识Vue的Render函数Render）
vue render用法（初识Vue的Render函数Render）实际上你看到的结果并没有发生变化，但是组件确实提供了称为插槽（slots）的东西。让我们利用它，看看我们是否得到了预期的结果。现在代码是这样的：让我们尝试以下示例，看看会发生什么？现在，如果我们想重用组件，我们可以通过复制粘贴来完成：你看到的将是四个一模一样的但是，现在我们需要对组件进行一些更改。我们不希望打印相同的文本。我们怎样才能改变它？如果我们在组件内部键入内容，是否可以尝试？
介绍本篇同样是作为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函数的使用，更加复杂的使用方式还需要时间和实践，配合业务编写更加复杂的组件结构！
