VUE进阶篇Part9（render函数）

这里介绍一下render函数。

作用：使用render函数就不需要在template中一点点的写html了，可以通过函数去构建，实际上render函数就是用来构建一个组件的

这里分为以下几点去讲解，每个都有一个小例子：

1、render函数的初步了解
2、render函数的第一个参数
3、render函数的第二个参数
4、render函数的第三个参数
5、this.$slots在render函数中的应用
6、通过props在render函数中传递数据
7、v-model在render函数中的应用
8、作用域插槽在render函数中的使用
9、函数组件化

1、render函数的初步了解

需求：向子组件传递一个数，如果传递的是1，那么内容就会被h1包裹

<child v-bind:level="level">
我是孙笑川
</child>

data:{
   
	level:1
},
components:{
   
	'child':{
   
		props:['level'],
		render:function(createElement){
   
			return createElement('h' + this.level,
				this.$slots.default
			)
		}
	}
}

2、render函数的第一个参数

在render函数中的参数必须是createElement，这个createElement是function

createElement作为返回值，传入的参数有三个，这里的先介绍第一个，第一个参数可以传入 String | Object | Function 其中之一

<child></child>

data:{
   },
components:{
   
	'child':{
   
		render:function(createElement){
   
			//String - html标签
			//return createElement('div')
			
			//Object - 一个有数据的对象
			//return createElemnt({
   
			//	template:'<div>我是孙笑川</div>'
			//})

			//Function - 函数返回一个含有数据的对象
			var domFun = function(){
   
				return {
   
					template:'<div>我是孙笑川</div>'
				}
			}
			return createElement(domFun())
		}
	}
}

3、render函数的第二个参数

第二个参数是可选参数，并且之能是数据对象Object

<child></child>

components: {
   
    'child': {
   
        //第一个参数必选
        render: function (createElement) {
   
            //String - html标签
            return createElement({
   
                template: '<div>我是孙笑川</div>'
            }, {
   
                    class: {