1. 概述

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

言归正传,今天我们来聊聊 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 onclick="alert(123)">按钮</button></h1>

3. 综述

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

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

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

4. 个人公众号

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

VUE3 之 render 函数的使用 - 这个系列的教程通俗易懂,适合新手的更多相关文章

  1. VUE3 之 自定义指令的实现 - 这个系列的教程通俗易懂,适合新手

    1. 概述 老话说的好:能屈能伸的人生,才是完满而丰富的人生. 言归正传,今天我们来聊聊 VUE 中自定义指令的实现. 2. 自定义指令 2.1 文本框聚焦的实现  <body> < ...

  2. VUE3 之 使用标签实现动画与过渡效果(下) - 这个系列的教程通俗易懂,适合新手

    1. 概述 毛毛虫效应: 有这样一个实验,将许多毛毛虫放在一个花盆边缘,使它们首尾相接,围成一个圈.然后在离花盆很近的地方撒了一些毛毛虫的食物. 此时,毛毛虫并不会向食物的方向爬去,而是在花盆边缘,一 ...

  3. VUE3 之 多个 v-model 绑定及 v-model 修饰符的使用 - 这个系列的教程通俗易懂,适合新手

    1. 概述 洛克定律告诉我们: 当我们的目标很远大,远到我们都看不到终点时,放弃几率就会很大,就像跑马拉松比赛,由于时间长.距离长,很多选手都会选择在中途放弃. 其实有个好办法,就是拆分,把大目标拆分 ...

  4. VUE3 之 插槽的使用 - 这个系列的教程通俗易懂,适合新手

    1. 概述 非理性定律告诉我们: 人们总是习惯于以情感去判断眼前的事物,非理性的去做决定. 对于长远的利益,人们更愿意去选择短期的利益. 因此在做决定前要让自己冷静,理性的分析,让自己看的更远. 言归 ...

  5. VUE3 之 作用域插槽 - 这个系列的教程通俗易懂,适合新手

    1. 概述 破窗效应告诉我们: 当一个建筑物窗户的玻璃完好无损时,很少有人想去破坏它,当有一个人破坏了一块窗户的玻璃,其他窗户的玻璃也很快会被人破坏. 同理,一个很干净的地方,人们不好意思去丢垃圾,但 ...

  6. VUE3 之 动态组件 - 这个系列的教程通俗易懂,适合新手

    1. 概述 暗示效应告诉我们: 巧妙的暗示会在不知不觉中剥夺我们的判断力,对我们的思维形成一定的影响,造成我们行为的些许改变或者偏差. 例如你的朋友说你脸色不太好,是不是病了,此时,你可能就会感觉浑身 ...

  7. VUE3 之 ref、provide、inject 的使用 - 这个系列的教程通俗易懂,适合新手

    1. 概述 首因效应告诉我们: 在日常交往中,第一印象是非常重要的,好的第一印象能让我们在与人相处时事半功倍. 但也从另一面告诉我们,不能仅凭第一印象去判断一个人,有时虚假的第一印象,也有可能蒙蔽我们 ...

  8. VUE3 之 动画与过渡的实现 - 这个系列的教程通俗易懂,适合新手

    1. 概述 光环效应告诉我们: 当一个人在某一方面取得了巨大的成功,人们就会给他贴上正面的标签,这个人从此就被"优秀"的光环所笼罩,他做的一切,人们都认为是正确的. 例如:越是名气 ...

  9. VUE3 之 使用标签实现动画与过渡效果 - 这个系列的教程通俗易懂,适合新手

    1. 概述 巴纳姆效应告诉我们: 人们更容易相信笼统的.常见的人格描述,并觉得特别适合自己,认为该描述真实地反映了自己的人格面貌. 这也是所有算命先生的小把戏,算命先生通常把话说的很笼统,很通用,基本 ...

随机推荐

  1. java中为什么接口中的属性和方法都默认为public?

    4)为什么接口中的属性和方法都默认为public?Sun公司当初为什么要把java的接口设计发明成这样? [新手可忽略不影响继续学习]答:如上所述,马克-to-win:既然接口强于抽象类能胜任作为和外 ...

  2. 使用flex的同时设置超出喜爱是省略号,

    超出宽度,显示省略号 overflow:hidden; white-space:nowrap; text-overflow:ellipsis; 需要注意的是,在移动端在flex元素中的内容进行省略文字 ...

  3. LC-349

    Given two integer arrays nums1 and nums2, return an array of their intersection. Each element in the ...

  4. 讲解CPU之NUMA硬件体系以及机制(lscpu查看相关信息)

    先看看从系统层面反映出来的numa cpu信息.采样机器为实体机.80核.128内存. [root@ht2 src]# lscpu Architecture: x86_64 #x86架构下的64位 C ...

  5. 启动jar包的shell脚本

    在jar包的同级目录新建文件例如:app_jar.sh 然后填写如下内容: #!/bin/bash #source /etc/profile # Auth:Liucx # Please change ...

  6. Typora原生态的图片格式快速转化为HTML格式

    Typora更改图片样式 前言 ​ 在Typora中插入的图片,默认是居中且显示原图大小的,如果想要缩小显示,可以右击图片选择缩放图片. ​ 但是,当我上传到博客园中时,并没有保留 居中.缩放 的样式 ...

  7. 学习day43

    开始学习html知识

  8. 将border 边框换成图片 border-image

    <template>   <div class="heart"></div> </template> <script> ...

  9. 【面试普通人VS高手系列】什么叫做阻塞队列的有界和无界

    昨天一个3年Java经验的小伙伴私信我,他说现在面试怎么这么难啊! 我只是面试一个业务开发,他们竟然问我: 什么叫阻塞队列的有界和无界.现在面试也太卷了吧! 如果你也遇到过类似问题,那我们来看看普通人 ...

  10. C#常见控件与SQL Sever数据库交互

    C#常见控件与SQL Sever数据库交互 下拉框(ComboBox)与数据库绑定 首先,我们采用DataSet作为临时的数据库,这样会比较好 那么,我们先创建两个成员(对象) string sqlc ...