vue render生成html,在vue中如何渲染函数render(详细教程)
本篇文章主要介绍了vue渲染函数render的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
1.什么是render函数?
vue通过 template 来创建你的 HTML。但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力。此时,需要用render来创建HTML。
比如如下我想要实现如下html:
Hello world!
我们会如下使用:
演示Vue
Hello world!
Vue.component('tb-heading', {
template: '#templateId',
props: {
level: {
type: Number,
required: true
}
}
});
new Vue({
el: '#container'
});
2.例:
遇到的问题:
在工作中,我创建了一个button组件,又创建了一个button-group组件
button组件较为简单,就是一个可以输入type/size/icon等属性的button
此为渲染后结果。
然后,创建button-group组件,目标结果为
此处,不仅要在最外层包裹一层p,还要在每个button组件外层包裹一层p标签。此处,就需要使用render函数了。
既然有了render函数,就不再需要template标签了,vue文件中只需要script标签(该组件style是全局的)
button-group.vue如下
export default {
name: "XButtonGroup",
props: {
compact: { //自定义的button-group属性,影响其classname
type: Boolean,
default: true
}
},
render(createElement) {
//此处创建element
},
computed: {
groupClass() {
const className = ["field"]; //通过计算属性监听compact属性传入className
className.push(this.compact ? "has-addons" : "is-grouped");
return className;
}
}
};
接下来就要看render函数了。
render函数中的createElement方法有三个参数。第一个参数为外层标签名,第二个为外层标签的属性对象,第三个为外层标签中的内容
所以第一步render(createElement) {
return createElement(
'p', {
class: this.groupClass
}, '内容',
)
}
渲染结果:
那怎样在外层p中渲染button组件呢?
render函数的第三个参数除了字符串,还可以传入VNode的数组。VNode就是vue中的节点。
此处,我们通过this.$slots.default获取所有插入到button-group组件内默认slot的button节点render(createElement) {
return createElement(
'p', {
class: this.groupClass
}, this.$slots.default,
)
},
渲染结果:
button已经正确渲染到了外层p中。但是怎么在每个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(
'p', {
class: this.groupClass
}, arry,
)
},
渲染结果:
并且根据button-group的compact属性可以切换不同的class,生成不同的效果
{{item}}
{{item}}
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
vue render生成html,在vue中如何渲染函数render(详细教程)相关推荐
- Vue.js 中的渲染函数是什么?如何使用渲染函数?
Vue.js 中的渲染函数是什么?如何使用渲染函数? Vue.js 是一款流行的前端框架,它提供了许多方便的工具和 API,用于构建交互式的用户界面.其中,渲染函数是 Vue.js 中一个强大的工具, ...
- vue的渲染函数 - render
vue的渲染函数 - render 一.render函数是什么? 二.render函数的参数 1. createElement 第一个参数是必填的,可以是String | Object | Funct ...
- Vue渲染函数render
渲染函数render render 函数 跟 模板(template) 都是用来创建 html 模板的,但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复,这时候就可以用 rend ...
- Vue3官网-可复用组合式API(十四)实例 property(\$slots,\$attrs)、渲染函数render(虚拟节点VNode,h() 参数,使用JavaScript代替模板功能),插件
Vue3官网-可复用&组合式API(十四)实例 property($slots,$attrs).渲染函数render(虚拟节点VNode,h() 参数,使用JavaScript代替模板功能), ...
- amazon海淘+CUL中美速递转运详细教程(免税)
amazon海淘+CUL中美速递转运详细教程(免税) 9月15日开始amazon和drugstore(我常用的两家)征收消费税,运到免税州,要收取费用中转到加州再发货.偶然发现CUL中美速递有免税州直 ...
- c语言isnumber函数的使用方法,在excel中使用ISNUMBER函数的详细步骤介绍
软件大小: 73 MB 软件版本: 2010高级标准版 软件类型: 办公工具 查看详情 直接下载 yesky 标签: 想知道excel中ISNUMBER函数怎么使用吗?以下是小编给大家整理的在exce ...
- vue动态生成html元素,Vue.js中的动态html元素
更新: 基于 this answer,您可以在Vue 2中执行类似的动态模板组件.您实际上可以在计算部分中设置组件规范并使用 :is绑定它 var v = new Vue({ el: '#vue', ...
- vue render 渲染html,详解vue渲染函数render的使用
1.什么是render函数? vue通过 template 来创建你的 HTML.但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力.此时,需要用render来创建HTML. 比如 ...
- Vue - 渲染函数render
一.render函数是什么 简单的说,在vue中我们使用模板HTML语法来组建页面的,使用render函数我们可以用js语言来构建DOM.因为vue是虚拟DOM,所以在拿到template模板时也要转 ...
最新文章
- Squid的refresh_pattern配置
- 微服务慌了!看看人家这分布式事务搞得,就是不一样
- FPGA之道(52)状态机的概念
- 【 FPGA 】Vivado和ISE设计流程比较(重点是Vivado IDE)
- 远程定位gps linux,GPS(NMEA)数据解析
- CRM Web Client UI异步搜索介绍
- [No0000DB]C# FtpClientHelper Ftp客户端上传下载重命名 类封装
- 《操作系统知识点整理》
- C语言的putpiel函数,C语言graphics.h函数介绍
- 问题 B: 编写函数:Swap (I) (Append Code)
- 【运维安全】-HTTP协议
- 实现Mybatis接口模式下的数据库调用分离
- 兼容性所有浏览器的透明CSS设置
- 后勤管理系统-在线报修系统
- 为什么使用一个变频器控制多个电机?
- Dagger2 学习
- 整数转罗马数字 + 逆向(Python)
- APFNet训练+测试复现过程记录
- Python:实现pollard rho大数分解算法(附完整源码)
- Swift 周报 第十七期