render方法的使用

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>