位置: IT常识 - 正文
VUE3 之 render 函数的使用 - 这个系列的教程通俗易懂，适合自学(vue使用render)
编辑：rootadmin目录
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 标签供选择，但显然这么写，非常的不优雅。
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，欢迎大家关注
上一篇：Linux标准的文件系统知识分享(Ext2/Ext3/Ext4)(linux标准文件和链接文件)
下一篇：系统资源不足无法完成请求的服务win10解决教程(系统资源不足,无法)