VUE3 之 render 函数的使用 - 这个系列的教程通俗易懂，适合新手
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 函数的使用 - 这个系列的教程通俗易懂，适合新手的更多相关文章
- VUE3 之 自定义指令的实现 - 这个系列的教程通俗易懂，适合新手
1. 概述 老话说的好:能屈能伸的人生,才是完满而丰富的人生. 言归正传,今天我们来聊聊 VUE 中自定义指令的实现. 2. 自定义指令 2.1 文本框聚焦的实现 <body> < ...
- VUE3 之 使用标签实现动画与过渡效果（下） - 这个系列的教程通俗易懂，适合新手
1. 概述 毛毛虫效应: 有这样一个实验,将许多毛毛虫放在一个花盆边缘,使它们首尾相接,围成一个圈.然后在离花盆很近的地方撒了一些毛毛虫的食物. 此时,毛毛虫并不会向食物的方向爬去,而是在花盆边缘,一 ...
- VUE3 之 多个 v-model 绑定及 v-model 修饰符的使用 - 这个系列的教程通俗易懂，适合新手
1. 概述 洛克定律告诉我们: 当我们的目标很远大,远到我们都看不到终点时,放弃几率就会很大,就像跑马拉松比赛,由于时间长.距离长,很多选手都会选择在中途放弃. 其实有个好办法,就是拆分,把大目标拆分 ...
- VUE3 之 插槽的使用 - 这个系列的教程通俗易懂，适合新手
1. 概述 非理性定律告诉我们: 人们总是习惯于以情感去判断眼前的事物,非理性的去做决定. 对于长远的利益,人们更愿意去选择短期的利益. 因此在做决定前要让自己冷静,理性的分析,让自己看的更远. 言归 ...
- VUE3 之 作用域插槽 - 这个系列的教程通俗易懂，适合新手
1. 概述 破窗效应告诉我们: 当一个建筑物窗户的玻璃完好无损时,很少有人想去破坏它,当有一个人破坏了一块窗户的玻璃,其他窗户的玻璃也很快会被人破坏. 同理,一个很干净的地方,人们不好意思去丢垃圾,但 ...
- VUE3 之 动态组件 - 这个系列的教程通俗易懂，适合新手
1. 概述 暗示效应告诉我们: 巧妙的暗示会在不知不觉中剥夺我们的判断力,对我们的思维形成一定的影响,造成我们行为的些许改变或者偏差. 例如你的朋友说你脸色不太好,是不是病了,此时,你可能就会感觉浑身 ...
- VUE3 之 ref、provide、inject 的使用 - 这个系列的教程通俗易懂，适合新手
1. 概述 首因效应告诉我们: 在日常交往中,第一印象是非常重要的,好的第一印象能让我们在与人相处时事半功倍. 但也从另一面告诉我们,不能仅凭第一印象去判断一个人,有时虚假的第一印象,也有可能蒙蔽我们 ...
- VUE3 之 动画与过渡的实现 - 这个系列的教程通俗易懂，适合新手
1. 概述 光环效应告诉我们: 当一个人在某一方面取得了巨大的成功,人们就会给他贴上正面的标签,这个人从此就被"优秀"的光环所笼罩,他做的一切,人们都认为是正确的. 例如:越是名气 ...
- VUE3 之 使用标签实现动画与过渡效果 - 这个系列的教程通俗易懂，适合新手
1. 概述 巴纳姆效应告诉我们: 人们更容易相信笼统的.常见的人格描述,并觉得特别适合自己,认为该描述真实地反映了自己的人格面貌. 这也是所有算命先生的小把戏,算命先生通常把话说的很笼统,很通用,基本 ...
随机推荐
- 【Android开发】Webview 和 JS 交互问题
一,安卓原生调用JS代码 1,js代码: function handlePasteDataFromApp(pasteStr) { showInfo('pasteData: aaaaa' + JSON. ...
- Myeclipse 中怎样更改web项目的访问名
第一步:在要修改的项目名称上右击选择最下面一列的"prepertise"(属性),进入属性设置界面. 第二步:找到左侧菜单栏的"Myeclipse"中的web项 ...
- FastAPI（七十四）实战开发《在线课程学习系统》接口开发-- 删除留言
之前文章FastAPI(七十三)实战开发<在线课程学习系统>接口开发-- 回复留言,那么我们这次分享删除留言接口的开发 可以对留言进行删除,这里的删除,我们使用的是逻辑的删除,不是物理删除 ...
- matplotlib---设置坐标轴
import matplotlib.pyplot as plt import numpy as np # 一维数组, 元素为从-3到3之间均匀地产生50个点 x = np.linspace(-3, 3 ...
- spring-aop相关概念
如果下面有疑问请看完动态代理技术的分析 Aop术语: Target(目标对象):要被增强的方法的对象 Proxy(代理对象):简单的说就是对目标对象进行增强的代理类 Joinpoint(连接点):可以 ...
- Alibaba Java诊断工具Arthas查看Dubbo动态代理类
原创/朱季谦 阅读Dubbo源码过程中,会发现,Dubbo消费端在做远程调用时,默认通过 Javassist 框架为服务接口生成动态代理类,接着再去调用代理类实现远程接口调用.在阅读这部分源码时,最后 ...
- vue - scss 引入 外部 在线 css
<style lang="scss"> @import url('https://fonts.googleapis.com/css2?family=Lobster&am ...
- .NET MAUI发布了期待已久的候选版本（RC1)
作者:David Ortinau 我们激动地宣布在4/13/2022.NET多平台应用UI (.NET MAUI)发布了候选版本.SDK现在已经集成好了API,可以更新库,并为GA(通用可用性)兼容性 ...
- Vim 中进行文本替换
Vim 中进行文本替换 格式 用法 :[range]s/from/to/[flags] tips: [] 表示该内容可选 参数 from 需要替换的字符串(可以是正则表达式) to 替换后的字符串 r ...
- 分享两个实用的shell脚本
各位,早上好啊~ 发现许久没有分享过技术文章了,今天分享两个部署项目时候比较实用的shell脚本 一键部署shell脚本 由于个人部署,会习惯把jar放到lib目录下面,如果你没有这个习惯,可以适当做 ...