详解vue渲染函数render的使用

网友投稿 642 2023-03-06


详解vue渲染函数render的使用

1.什么是render函数?

vue通过 template 来创建你的 HTML。但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力。此时,需要用render来创建HTML。

比如如下我想要实现如下html:

Hello world!

我们会如下使用:

Hello world!

2.例:

遇到的问题:

在工作中,我创建了一个button组件,又创建了一个button-group组件

button组件较为简单,就是一个可以输入type/size/icon等属性的button

此为渲染后结果。

然后,创建button-group组件,目标结果为

此处,不仅要在最外层包裹一层div,还要在每个button组件外层包裹一层p标签。此处,就需要使用render函数了。

既然有了render函数,就不再需要template标签了,vue文件中只需要script标签(该组件style是全局的)

button-group.vue如下

接下来就要看render函数了。

render函数中的createElement方法有三个参数。第一个参数为外层标签名,第二个为外层标签的属性对象,第三个为外层标签中的内容

所以第一步

render(createElement) {

return createElement(

'div', {

class: this.groupClass

}, '内容',

)

}

渲染结果:

那怎样在外层dihttp://v中渲染button组件呢?

render函数的第三个参数除了字符串,还可以传入VNode的数组。VNode就是vue中的节点。

此处,我们通过this.$slots.default获取所有插入到button-group组件内默认slot的button节点

render(createElement) {

return createElement(

'div', {

class: this.groupClass

}, this.$slots.default,

)

},

渲染结果:

button已经正确渲染到了外层div中。但是怎么在每个button外层包裹一层元素呢。createElement会创建新的VNode,而render函数第三个参数需要VNode数组,所以我们需要传入一个由createElement返回值组成的数组。

render(createElement) {

//遍历每一个VNode,用createElement函数在外层包裹class为control的p标签,组成新的VNode数组

const arry = this.$slots.default.map(VNode => {

return createElement('p', {

class: 'control'

}, [VNode])

})

return createElement(

'div', {

class: this.groupClass

}, arry,

)

},

渲染结果:

并且根据button-group的compact属性可以切换不同的class,生成不同的效果

{{item}}

{{item}}


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:入库接口测试用例图解大全(入库设计)
下一篇:调用微信api接口开发(微信开发者api)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~