render方法的作用:
用js来渲染组件
准备工作:
在你的vue项目中 src/view 这个目录下新建一个 .vue文件:
这是render函数最基础的用法:
<template>
<div>
<Child :level="1"></Child>
<Child :level="2"></Child>
<Child :level="3"></Child>
</div>
</template>
<script>
//新建一个组件
let Child = {
//规定所接受数据的类型
props:{level:{type:Number}},
//使用render函数创建组件
render(createElement){
return createElement("h"+this.level,'你好 vue')}
}
export default{
//注册组件
components:{Child}
}
</script>
保存,运行。运行结果如下图:
显而易见,render方法把Child组件渲染为h1,h2等标签了。
createElement里一共有三个参数:
createElement(标签,[参数],内容)而其中的参数是个对象
参数对象:
{
on:{‘click’:this.clickHd},
class:{“big”:true},
style:{color:“blue”},
attrs:{id:‘foo’},
foo:名称,
domProps:{
innerHTML:’< i >not bad< i >’
value:值
}
}
下面我们就一个一个看看这些值如何用
methods:{
clickHd(e){
alert(e.target.title)
}
},
render(createElement){
return createElement("h"+this.level,{
class:{"big":true}, //执行之后,在网页中查看元素,可见h1,h2和h3标签上都写有一个big类
style:{color:this.level==2?'red':'green'}, //执行之后,h2标签文本为红色,h1和h3文本为绿色
attrs:{title:this.level+'标题'}, //执行之后,点击h1,h2,h3文本会有标题1,标题2,标题3小框出现
//domProps:{innerHTML:"<em>你好内容</em>"}, //执行之后页面显示你好内容,"你好 vue"无效
ref:'myh'+1, //这个可用于选择元素
on:{'click':this.clickHd} //执行之后点击h1,h2,h3文本可以弹出标题1,标题2,标题3弹出框
},"你好 vue")
}
render函数条件渲染
<template>
<div>
<MyList :item="'我爱前端'"></MyList>
<MyList :item="['react','vue','html','css']"></MyList>
</div>
</template>
<script>
let MyList = {
props:{item:{type:[String,Array]}},
render(createElement){
if(Array.isArray(this.item)){
return createElement("ul",{},this.item.map(it=>{
return createElement("li",it)
}))
}else{
return createElement("p",this.item)
}
}
}
export default{
components:{MyList}
}
</script>
render插槽:
<template>
<div>
<Child :level="1">
<span>我是插槽</span> //普通插槽
</Child>
<Child :level="2">
<span slot="dream">我有一个梦想</span> //具名插槽
</Child>
<Child :level="3"></Child>
</div>
</template>
<script>
//新建一个组件
let Child = {
//规定所接受数据的类型
props:{level:{type:Number}},
//使用render函数创建组件
render(createElement){
return createElement("h"+this.level,['你好 vue',this.$slots.default,this.$slots.dream])}
}
export default{
//注册组件
components:{Child}
}
</script>