render函数在.vue单文件组件,局部组件,全局组件中都可以用
在.vue单文件组件中 <template>优先级更高
在线示例
render函数中的参数
- 第一个参数
createElement函数,别名h函数
createElement第一个参数可以是字符串可以是对象可以是方法
render(h){
return h('h1')
}
-------------------------------
render(h){
return h({
template:`<h1>111</h1>`
})
}
-------------------------------
render(h){
let dom=function(){
return{
template:`<h1>111</h1>`
}
}
return h(dom())
}
createElement第二个参数可选,用于设置一些属性
render(h){
return h('div',{
class:{
foo:true,
aaa:false
},
style:{
color:'red',
fontSize:'16px'
}
attrs:{
id:'foo'
}
})
}
createElement第三个参数可选,是一个数组,用于设置子节点
render(h){
return h('div',[
h('h1','我是h1标题'),
h('h2','我是h2标题')
])
}
<div><h1>我是h1标题</h1><h2>我是h2标题</h2></div>