有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

render vue (Vue中的Render函数)Render Function

vue 炮渣日记 4周前 (11-12) 17次浏览 已收录 0个评论 扫描二维码

从一个示例开始

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

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


render vue (Vue中的Render函数)Render Function

如下面的屏幕截图所示:


render vue (Vue中的Render函数)Render Function

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


render vue (Vue中的Render函数)Render Function

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


render vue (Vue中的Render函数)Render Function

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

让我们尝试以下示例,看看会发生什么?


render vue (Vue中的Render函数)Render Function

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


render vue (Vue中的Render函数)Render Function

查看浏览器结果:


render vue (Vue中的Render函数)Render Function

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


render vue (Vue中的Render函数)Render Function

在上面的代码中,我们使用以下代码更改了组件并使用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

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


render vue (Vue中的Render函数)Render Function

总结

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

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址