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

import { ref } from 'vue';

const param = ref("Hello World") 

然后，我们在h函数中引入这个组件，他就会被渲染

插槽

h函数同样支持插槽，我们把HelloWorld组件改成一个插槽组件

HelloWorld.vue

import { ref } from 'vue';

const param = ref("Hello World") 

index.ts

最终渲染如下

感谢各位的阅读，以上就是“Vue3中的h函数怎么使用”的内容了，经过本文的学习后，相信大家对Vue3中的h函数怎么使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！