这里介绍一下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: {