位置: IT常识 - 正文

VUE3 之 render 函数的使用 - 这个系列的教程通俗易懂,适合自学(vue使用render)

编辑:rootadmin
VUE3 之 render 函数的使用 - 这个系列的教程通俗易懂,适合自学

目录

1. 概述

2. render 函数

3. 综述

4. 个人公众号


1. 概述

推荐整理分享VUE3 之 render 函数的使用 - 这个系列的教程通俗易懂,适合自学(vue使用render),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vuerender函数,vuerender函数,vue中render的用法,vue使用render,vue中render函数,vuerender函数,vue之render函数详解,vue之render函数详解,内容如对您有帮助,希望把文章链接给更多的朋友!

老话说的好:不用想的太多、太远,做好当天的事,知道明天要做什么就可以了。

言归正传,今天我们来聊聊 VUE 中 render 函数的使用。

2. render 函数

2.1 一个简单的例子

<body> <div id="myDiv"></div></body><script> const app = Vue.createApp({ template:` <my-h> 追风人 </my-h> ` }); app.component('my-h', { template:` <h1> <slot /> </h1> ` }); const vm = app.mount("#myDiv");</script>

 这个例子中,我们用到了之前学的 子组件 和 插槽,实现了对主组件中的文字加 h 标签的功能。

2.2 依据数据,改变 h 标签

const app = Vue.createApp({ data() { return { myLevel: 2 } }, template:` <my-h :level="myLevel"> 追风人 </my-h> ` }); app.component('my-h', { props: ['level'], template:` <h1 v-if="level===1"> <slot /> </h1> <h2 v-if="level===2"> <slot /> </h2> ` });

这个例子中,我们希望依据数据 myLevel 的值,改变主组件中文字的 h 标签,1 对应 h1,2 对应 h2。

2.3 更多的 h 标签

const app = Vue.createApp({ data() { return { myLevel: 3 } }, template:` <my-h :level="myLevel"> 追风人 </my-h> ` }); app.component('my-h', { props: ['level'], template:` <h1 v-if="level===1"> <slot /> </h1> <h2 v-if="level===2"> <slot /> </h2> <h3 v-if="level===3"> <slot /> </h3> <h4 v-if="level===4"> <slot /> </h4> <h5 v-if="level===5"> <slot /> </h5> ` });

我们希望可以有更多的 h 标签供选择,但显然这么写,非常的不优雅。

VUE3 之 render 函数的使用 - 这个系列的教程通俗易懂,适合自学(vue使用render)

2.4 使用 render 函数 简化代码

const app = Vue.createApp({ data() { return { myLevel: 6 } }, template:` <my-h :level="myLevel"> 追风人 </my-h> ` }); app.component('my-h', { props: ['level'], render() { const { h } = Vue; return h('h' + this.level, {name:"myh", id:"myh"}, this.$slots.default()) } });

这个例子中,我们使用 render 函数 代替 template。

const { h } = Vue;  这句是固定写法。

return h('h' + this.level, {name:"myh", id:"myh"}, this.$slots.default())

这句中,第一个参数 'h' + this.level 是标签,第二个参数 {name:"myh", id:"myh"} 是标签的属性,第三个参数 this.$slots.default() 是标签包裹的内容

生成的标签结果如下:<h6 name="myh" id="myh"> 追风人 </h6>

2.5 render 函数包裹更多的内容

const app = Vue.createApp({ data() { return { myLevel: 1 } }, template:` <my-h :level="myLevel"> 追风人 </my-h> ` }); app.component('my-h', { props: ['level'], render() { const { h } = Vue; return h('h' + this.level, {name:"myh", id:"myh"}, [ this.$slots.default(), h('br', {}), h('button', {onclick:"alert(123)"}, '按钮') ]) } });

 render 函数中 h 函数的第三个参数,可以是数组,例如上面的例子,生成的结果如下:

 <h1 name="myh" id="myh"> 追风人 <br><button οnclick="alert(123)">按钮</button></h1>

3. 综述

今天聊了一下 VUE 中 render 函数的使用,希望可以对大家的工作有所帮助,下一节我们继续讲 Vue 中的高级语法,敬请期待

欢迎帮忙点赞、评论、转发、加关注 :)

关注追风人聊Java,这里干货满满,都是实战类技术文章,通俗易懂,轻松上手。

4. 个人公众号

微信搜索公众号:追风人聊Java,欢迎大家关注

本文链接地址:https://www.jiuchutong.com/zhishi/281393.html 转载请保留说明!

上一篇:Linux标准的文件系统知识分享(Ext2/Ext3/Ext4)(linux标准文件和链接文件)

下一篇:系统资源不足无法完成请求的服务win10解决教程(系统资源不足,无法)

  • 收到上年度所得税返还会计分录
  • 美容美发属于什么行业
  • 用友 项目核算
  • 太阳能发电开票编码
  • 个税代扣代缴手续费返还 申请
  • 记账凭证如何填写明细科目
  • 出口退税中哪些是免税的
  • 税务机关和自然人属于平等主体吗
  • 收到赔偿款怎么做分录
  • 土地使用权评估原则
  • 应税服务增值税抵免
  • 如何认定纳税人资格证书
  • 增值税专用发票和普通发票的区别
  • 抵债资产计提折旧怎么算
  • 汇算清缴期间费用社保填哪里
  • 付了电费当月没有收到发票
  • 已认证未付款分录
  • 合同没签定金可以退的吗
  • 年终奖个税筹划临界点
  • 年度所得税汇算清缴表去哪里找
  • 分公司亏损还会分摊所得税吗
  • 营改增通知规定的税收优惠政策
  • 企业职工补助
  • 联营与参股公司的关系
  • 出售股票或债券的条件
  • 外汇局网上申报
  • 利息调整摊销的经济意义
  • 电脑开机后一直滴滴
  • 苹果6splus怎么操作技巧
  • 技术服务合同要盖骑缝章吗
  • 电脑病毒的特点包括
  • php数组可以使用哪些键名
  • 担保公司计提的费用
  • linux下4种kill某个用户所有进程的方法
  • win 11怎么安装
  • 实收资本大于注册资本是什么意思
  • 口腔门诊提供免费服务有哪些?
  • 收到的国家电网电话
  • php操作mysql数据库
  • js获取当前日期的函数
  • php中定义函数
  • 直接融资租赁案例
  • 合作社计提工资
  • PostgreSQL分区表(partitioning)应用实例详解
  • mysql5.6允许远程连接
  • 如何处理预付和预付差异
  • 更正申报补缴税款会影响记录
  • mssql分布式数据库
  • 购入固定资产款项未付
  • 雇用残疾人税收优惠
  • 劳动保护费是否可以抵扣
  • 税收滞纳金能不能超过税款
  • 外购材料时所支付的增值税应如何处理
  • 净利润递延所得税
  • 上年记错账了,本年如何调整
  • 应记入营业外支出的科目核算是
  • 公司变更名字后,公账怎么办
  • 其他应收款可以挂公司吗
  • 发票可以冲销几次
  • 暂估入账后费用怎么做账
  • sqlserver批量备份数据库
  • mysql 5.6 5.7 性能
  • 如何清除sql2008r2日志
  • mac开机声音怎么取消
  • ubuntu20.10
  • nodejs做接口
  • node.js连接数据库的代码
  • js 正则replace
  • jquery实现移动端
  • jquery调用json数据
  • python3.7 pip
  • 简述python的垃圾回收机制
  • js中tolocalestring
  • Jquery实现$.fn.extend和$.extend函数
  • android如何使用
  • python的介绍
  • ca证书密码是什么
  • 缴纳个人所得税怎么计算
  • 电子专票操作视频
  • 车辆免征信息怎么查
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设