render函数(渲染函数)
-
render和template是一样的作用,render提供的内置函数可以简化代码操作,render函数比template更接近编译器
-
template只封装了html代码
render(createElement) createElement是一个函数,需要3个可选参数: 第一个参数:标签名称 第二个参数:给当前标签绑定的属性对象 第三个属性:给当前标签插入的子元素数组 '' this.$slots.default
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
<script>
window.onload=function(){
//子组件
Vue.component('my-child',{
data(){
return {
}
},
props:{
num:{
type:Number,
required:true
}
},
render(createElement){
//createElement是一个函数
//参数:标签名称,属性对象,子元素数组
return createElement('h'+this.num,{
//将绑定给当前元素的所有属性写在对象中
style:{
color:'blue',
}
},['default--',this.$slots.default])
}
/*template:`
<div>
<h1 v-if='num==1'>
<slot></slot>
</h1>
<h2 v-else-if='num==2'>
<slot></slot>
</h2>
<h3 v-else-if='num==3'>
<slot></slot>
</h3>
<h4 v-else-if='num==4'>
<slot></slot>
</h4>
<h5 v-else-if='num==5'>
<slot></slot>
</h5>
<h6 v-else>
<slot></slot>
</h6>
</div>
`*/
})
var app=new Vue({
el:'#app',
data:{
},
components:{//父组件
'my-parent':{
data(){
return {
num:2,
}
},
template:`
<div>
<h1>my-parent</h1>
<my-child :num='num'>hello</my-child>
</div>
`
}
}
})
}
</script>
</head>
<body>
<div id="app">
<my-parent></my-parent>
</div>
</body>
</html>