Vue3中的h函数怎么使用
这篇文章主要讲解了“Vue3中的h函数怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue3中的h函数怎么使用”吧!
创新互联是一家专业提供焉耆企业网站建设,专注与网站建设、成都网站设计、H5高端网站建设、小程序制作等业务。10年已为焉耆众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。
简介
众所周知,vue内部构建的其实是虚拟DOM,而虚拟DOM是由虚拟节点生成的,实质上虚拟节点也就是一个js对象
事实上,我们在vue中写的template,最终也是经过渲染函数生成对应的VNode
而h函数就是用来生成VNode的一个函数,他的全名叫做createVNode
简单使用
参数
他一共跟三个参数
第一个参数
是一个字符串,他是必须的
这个字符串可以是 html标签名,一个组件、一个异步的组件或者是函数组件
第二个参数
是一个对象,可选的
与attribute、prop和事件相对应的对象
第三个参数
可以是字符串、数组或者是一个对象
他是VNodes,使用h函数来进行创建
使用
渲染效果如下
当然我们还可以使用rener函数进行渲染
计数器
渲染如下
进阶使用
函数组件
我们先写一个组件HelloWorld.vue
{{ param }}
然后,我们在h函数中引入这个组件,他就会被渲染
插槽
h函数同样支持插槽,我们把HelloWorld组件改成一个插槽组件
HelloWorld.vue
{{ param }}
index.ts
最终渲染如下
感谢各位的阅读,以上就是“Vue3中的h函数怎么使用”的内容了,经过本文的学习后,相信大家对Vue3中的h函数怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
本文名称:Vue3中的h函数怎么使用
文章URL:http://pwwzsj.com/article/ipccpg.html