好资源导航 » 文章资讯 » 了解VUE的render函数的使用

了解VUE的render函数的使用

2024-02-20 15:37:03 54

Vue推荐在绝大多数情况下使用template来创建你的HTML。然而在一些场景中，你真的需要JavaScript的完全编程的能力，这就是render函数，它比template更接近编译器。在HTML层，我们决定这样定义组件接口：通过传入不同的level1-6生成h1-h6标签，和使用slot生成内容


Helloworld!

/** *全局注册child组件，注意template如果值以#开始，则它用作选项符，将使用匹配元素的innerHTML作为模板。常用的技巧是用包含模板,这样的好处是html不会渲染里面的内容 *这里使用template不是最好的选择， *一、代码冗长 *二、在不同的标题插入内容需要重复使用slot *三、由于组件必须有根元素，所以标题和内容被包裹在一个无用的div中，比如

helloworld

*/ Vue.component('child',{ template:'#child-template', props:{ level:{ type:Number, required:true } }, data:function(){ return{ a:1 } } }) newVue({ el:"#div1" })

我们尝试使用render函数实现上面的例子,注意使用render函数，template选项将被忽略。createElement接收3个参数：

第一个参数可以是HTML标签名，组件或者函数都可以；此参数是必须的；

第二个为数据对象{Object}（可选）；

第三个为子节点{String|Array}（可选）,多个子节点[createElement(tag1),createElement(tag2)]。



Helloworld!



span
headerslotspan

Vue.component('child',{ render:function(createElement){ console.log(this.$slots); returncreateElement( 'h'+this.level,//tagName标签名称 { //为每个h标签设置class 'class':{ foo:true, bar:false }, //最终被渲染为内联样式 style:{ color:'red', fontSize:'14px' }, //其他的html属性 attrs:{ id:'foo', 'data-id':'bar' }, //DOM属性 domProps:{ //innerHTML:'fromdomProps', }, //事件监听器基于"on" //所以不再支持如v-on:keyup.enter修饰器 on:{ click:this.clickHandler }, //... }, //你可以从this.$slots获取VNodes列表中的静态内容 //$slots.default用来访问组件的不具名slot //当你可能需要具名slot的时候需要指定slot的name,this.$slots.header [this.$slots.default] ) }, template:'

',//将被忽略 props:{ level:{ type:Number, required:true } }, methods:{ clickHandler:function(){ console.log('clickHandler') } } }) newVue({ el:"#div1" })

我们现在可以完成这样的组件



Helloworld!



//递归函数获得helloworld文本
functiongetChildrenTextContent(child){
returnchild.map(function(node){
returnnode.children?getChildrenTextContent(node.children):node.text
}).join('')
}
Vue.component('child',{
render:function(createElement){
varhello_world=getChildrenTextContent(this.$slots.default)
.toLowerCase()
.replace(/\W+/g,'-')
.replace(/^\-|\-$/g,'');
returncreateElement(
'h'+this.level,
{},
[//创建一个a标签，设置属性，并设置a标签的子节点
createElement('a',{
attrs:{
name:hello_world,
href:'#'+hello_world
}
},this.$slots.default)
]
)
},
props:{
level:{
type:Number,
required:true
}
}
})
newVue({
el:"#div1"
})

注意VNode的唯一性,这里两个VNode指向同一引用是错误的，如果要重复创建多个相同元素/组件，可以使用工厂函数实现



Helloworld!

Vue.component('child',{ //render:function(createElement){ //varmyParagraphVNode=createElement('p','hello') //returncreateElement('div', //[myParagraphVNode,myParagraphVNode] //) //}, render:function(createElement){ returncreateElement('div', Array.apply(null,{length:20}).map(function(){ returncreateElement('p','hello') }) ) }, props:{ level:{ type:Number, required:true } } }) newVue({ el:"#div1" })

使用javascript代替模板功能，某些api要自己实现

①使用if/else代替v-if

②使用map代替v-for

Vue.component('child',{
render:function(createElement){
if(this.lists.length){
returncreateElement('ul',this.lists.map(function(){
returncreateElement('li','hi')
}))
}else{
returncreateElement('p','nolists')
}
},
props:{
level:{
type:Number,
required:true
}
},
data:function(){
return{
lists:[1,2,3]
}
}
})

//render函数中没有与v-model相应的api-你必须自己来实现相应的逻辑:
Vue.component('child-msg',{
render:function(createElement){
varself=this;
returncreateElement('div',[
createElement('input',{
'on':{
input:function(event){
self.value=event.target.value;
}
}
}),createElement('p',self.value)
])
},
props:{
level:{
type:Number,
required:true
}
},
data:function(){
return{
value:''
}
}
})
newVue({
el:"#div1"
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

了解VUE的render函数的使用

helloworld

Helloworld!

热门推荐

随机推荐