vue 中的 render 函数作用详解
render函数作用
vue渲染函数文档第一遍看的晕晕乎乎的，再看看写写终于清晰了。建议配合文档阅读，本文也是根据文档加上自己的理解。
注：本文代码都是在单文件组件中编写。代码地址
render函数作用
render函数跟template一样都是创建html模板的，但是有些场景中用template实现起来代码冗长繁琐而且有大量重复，这时候就可以用render函数。
官网例子：子组件想要根据父组件传递的level值（1-6）来决定渲染标签h几。具体代码可以看文档。
render函数讲解
render函数即渲染函数，它是个函数，它的参数也是个函数——即createElement，我们重点来说createElement参数。
render函数的返回值（VNode）
VNode（即：虚拟节点），也就是我们要渲染的节点。
render函数的参数（createElement）
createElement是render函数的参数，它本身也是个函数，并且有三个参数。
createElement函数的返回值（VNode）
createElement函数的返回值是VNode（即：虚拟节点）。
createElement函数的参数（三个）
一个HTML标签字符串，组件选项对象，或者解析上述任何一种的一个async异步函数。类型：{String|Object|Function}。必需。
一个包含模板相关属性的数据对象你可以在template中使用这些特性。类型：{Object}。可选。
子虚拟节点(VNodes)，由createElement()构建而成，也可以使用字符串来生成“文本虚拟节点”。类型：{String|Array}。可选。
结合代码
/**
*render:渲染函数
*参数:createElement
*参数类型:Function
*/
render:function(createElement){
let_this=this['$options'].parent//我这个是在.vue文件的components中写的，这样写才能访问this
let_header=_this.$slots.header//$slots:vue中所有分发插槽，不具名的都在default里
/**
*createElement本身也是一个函数，它有三个参数
*返回值:VNode，即虚拟节点
*1.一个HTML标签字符串，组件选项对象，或者解析上述任何一种的一个async异步函数。必需参数。{String|Object|Function}-就是你要渲染的最外层标签
*2.一个包含模板相关属性的数据对象你可以在template中使用这些特性。可选参数。{Object}-1中的标签的属性
*3.子虚拟节点(VNodes)，由`createElement()`构建而成，也可以使用字符串来生成“文本虚拟节点”。可选参数。{String|Array}-1的子节点，可以用createElement()创建，文本节点直接写就可以
*/
returncreateElement(
//1.要渲染的标签名称：第一个参数【必需】
'div',
//2.1中渲染的标签的属性，详情查看文档：第二个参数【可选】
{
style:{
color:'#333',
border:'1pxsolid#ccc'
}
},
//3.1中渲染的标签的子元素数组：第三个参数【可选】
[
'text',//文本节点直接写就可以
_this.$slots.default,//所有不具名插槽，是个数组
createElement('div',_header)//createElement()创建的VNodes
]
)
}
可以看下控制台中打印出来的$slots
下面在通过具体代码看下render函数怎么用
例：
render:(h)=>{
returnh('div',{
//给div绑定value属性
props:{
value:''
},
//给div绑定样式
style:{
width:'30px'
},
//给div绑定点击事件
on:{
click:()=>{
console.log('点击事件')
}
},
})
}
深入data对象
有一件事要注意：正如在模板语法中，v-bind:class和v-bind:style，会被特别对待一样，在VNode数据对象中，下列属性名是级别最高的字段。该对象也允许你绑定普通的HTML特性，就像DOM属性一样，比如innerHTML(这会取代v-html指令)。
{
//和`v-bind:class`一样的API
'class':{
foo:true,
bar:false
},
//和`v-bind:style`一样的API
style:{
color:'red',
fontSize:'14px'
},
//正常的HTML特性
attrs:{
id:'foo'
},
//组件props
props:{
myProp:'bar'
},
//DOM属性
domProps:{
innerHTML:'baz'
},
//事件监听器基于`on`
//所以不再支持如`v-on:keyup.enter`修饰器
//需要手动匹配keyCode。
on:{
click:this.clickHandler
},
//仅对于组件，用于监听原生事件，而不是组件内部使用
//`vm.$emit`触发的事件。
nativeOn:{
click:this.nativeClickHandler
},
//自定义指令。注意，你无法对`binding`中的`oldValue`
//赋值，因为Vue已经自动为你进行了同步。
directives:[
{
name:'my-custom-directive',
value:'2',
expression:'1+1',
arg:'foo',
modifiers:{
bar:true
}
}
],
//Scopedslotsintheformof
//{name:props=>VNode|Array}
scopedSlots:{
default:props=>createElement('span',props.text)
},
//如果组件是其他组件的子组件，需为插槽指定名称
slot:'name-of-slot',
//其他特殊顶层属性
key:'myKey',
ref:'myRef'
}
总结
到此这篇关于vue的render函数作用详解的文章就介绍到这了,更多相关vuerender函数作用内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。