VueJS渲染函数（render function）用法和原理详解

在上一节中，我们学习了VueJS混入mixins的用法，混入一般和组件一起使用，要注意混入mixins和Vue实例或组件有同名方法时的执行情况。本节我们来学下VueJS的渲染函数的用法和原理，我们之前已经学习了组件及其用法，例如，我们有一个需要在整个项目中重用的内容，我们可以将其转换为组件并使用它。
1、下面我们来看一个简单组件的例子，看看渲染函数的用法，以及在其中的作用和原理。

< testcomponent>< /testcomponent> < /div> < script type="text/javascript"> Vue.component('testcomponent', { template: '< h1>Hello World< /h1>', data: function () { }, methods: { } }); var vm = new Vue({ el: '#component_test' }); < /script>

文章图片
现在，如果我们想重用组件，只需再次复制即可，例如

< div id="component_test"> < testcomponent>< /testcomponent> < testcomponent>< /testcomponent> < testcomponent>< /testcomponent> < testcomponent>< /testcomponent> < /div>

文章图片
2、但是，现在我们需要对组件进行一些更改，我们不希望打印相同的文本，如何修改呢？若我们在组件中输入什么内容，会不会被输出呢？如下：

< div id="component_test"> < testcomponent>A< /testcomponent> < testcomponent>B< /testcomponent> < testcomponent>C< /testcomponent> < testcomponent>D< /testcomponent> < /div>

文章图片
你可以看到，输出不是预期的结果，不会像我们想的那样改变文本。
3、组件提供了一些称为插槽slot的东西，我们可以使用它，看看我们是否得到了想要的结果。

< div id="component_test"> < testcomponent>A< /testcomponent> < testcomponent>B< /testcomponent> < testcomponent>C< /testcomponent> < testcomponent>D< /testcomponent> < /div> < script type="text/javascript"> Vue.component('testcomponent', { template: '< h1>< slot>< /slot>< /h1>', data: function () { }, methods: { } }); var vm = new Vue({ el: '#component_test' }); < /script>

正如在上面的代码中看到的，在模板中我们添加了slot，因此现在它接收要发送到组件内部的值，如下面的截图所示。

文章图片
4、现在，假设我们想要改变颜色和大小。例如，目前我们正在使用h1标签，我们希望将相同组件的HTML标签更改为p标签或div标签，如何能灵活地进行这么多的改变呢？
我们可以在渲染函数的帮助下做到这一点，渲染函数（Render function）有助于使组件变得动态，并通过保持它的通用性和使用相同的组件传递参数来使用它。

< div id="component_test"> < testcomponent :elementtype="'div,red,25,div1'">Apple< /testcomponent> < testcomponent :elementtype="'h3,green,25,h3tag'">Bubble< /testcomponent> < testcomponent :elementtype="'p,blue,25,ptag'">Cat< /testcomponent> < testcomponent :elementtype="'div,green,25,divtag'">Dog< /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 app = new Vue({ el: '#component_test' }); < /script>

在上面的代码中，我们使用下面的代码更改了组件并添加了带有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 } } });

Props如下所示：

props: { elementtype: { attributes: String, required: true } }

我们已经定义了一个名为elementtype的属性，它接受string类型的属性字段。另一个必填字段，其中提到该字段是必填项。
在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字段中的值在逗号上拆分elementtype。
CreateElement将第一个参数作为要创建的elementtag，它使用下面的代码段传递给组件。

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

组件需要获取如上所示的props字段。它以:和props的名字开始。在这里，我们传递元素标记、颜色、字体大小和元素的id。
在render function、createElement中，我们使用逗号分隔元素，因此第一个元素是elementtag，它被赋予createElemet，如下面的代码段所示。