Vue3中的h函数如何使用
导读:本文共2147.5字符,通常情况下阅读需要7分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 简介众所周知,vue内部构建的其实是虚拟DOM,而虚拟DOM是由虚拟节点生成的,实质上虚拟节点也就是一个js对象事实上,我们在vue中写的template,最终也是经过渲染函数生成对应的VNode而h函数就是用来生成VNode的一个函数,他的全名叫做createVNode简单使用参数他一共跟三个参数第一个参数是一个字符串,他是必须的这个字符串可以是 html标签... ...
目录
(为您整理了一些要点),点击可以直达。简介
众所周知,vue内部构建的其实是虚拟DOM,而虚拟DOM是由虚拟节点生成的,实质上虚拟节点也就是一个js对象
事实上,我们在vue中写的template,最终也是经过渲染函数生成对应的VNode
而h函数就是用来生成VNode的一个函数,他的全名叫做createVNode
简单使用
参数
他一共跟三个参数
第一个参数
是一个字符串,他是必须的
这个字符串可以是 html标签名,一个组件、一个异步的组件或者是函数组件
第二个参数
是一个对象,可选的
与attribute、prop和事件相对应的对象
第三个参数
可以是字符串、数组或者是一个对象
他是VNodes,使用h函数来进行创建
使用
<script>import{h}from'vue'exportdefault{setup(){return()=>h("h3",null,"HelloWorld")}}</script>
渲染效果如下
当然我们还可以使用rener函数进行渲染
<script>import{h}from'vue'exportdefault{render(){returnh("h3",null,"HelloWorld")}}</script>
计数器
<script>import{h}from'vue'exportdefault{data(){return{counter:0}},render(){returnh("div",null,[h("h3",null,"计数器"),h("h4",null,`计数${this.counter}`),h("button",{onClick:()=>this.counter++},"点一下")])}}</script>
渲染如下
进阶使用
函数组件
我们先写一个组件HelloWorld.vue
<scriptsetuplang="ts">import{ref}from'vue';constparam=ref("HelloWorld")</script><template><h3>{{param}}</h3></template><stylescopedlang="less"></style>
然后,我们在h函数中引入这个组件,他就会被渲染
<script>import{h}from'vue'importHelloWorldfrom'./HelloWorld.vue'exportdefault{data(){return{counter:0}},render(){returnh("div",null,[h(HelloWorld)])}}</script>
插槽
h函数同样支持插槽,我们把HelloWorld组件改成一个插槽组件
HelloWorld.vue
<scriptsetuplang="ts">import{ref}from'vue';constparam=ref("HelloWorld")</script><template><h3>{{param}}</h3><slot></slot></template><stylescopedlang="less"></style>
index.ts
<script>import{h}from'vue'importHelloWorldfrom'./HelloWorld.vue'exportdefault{data(){return{counter:0}},render(){returnh("div",null,[h(HelloWorld,{},[h("div",null,"HelloSlot")])])}}</script>
最终渲染如下
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
Vue3中的h函数如何使用的详细内容,希望对您有所帮助,信息来源于网络。