vue3 h函数使用图文教程

序：

2、博主微信公众号：“程序员野区”，关注公众号回复“加群，可以进到博主微信群

正文：

别恐惧啊，别一看官方api那边标注的是进阶api就跳过去，这玩意好用呀

简单以一句话，他就是一个createElement（创建节点），

举个例子：如果你接触过JQuery，那就好办了，你看看下面jquery代码

var str="<a href='#'>111<a>"
$(str).html("22")

看的懂吗，上面是jquery代码，把这个字符串变成一个虚拟dom节点，然后把这个节点的内容111，变成22，而$(str)，就是把一个字符串dom节点化。

一、简单的h()案例

代码部分

<template>
    <btn/>
</template>
<script setup lang="ts">
    import {h} from "vue"
import { $ } from "vue/macros";
    const btn=()=>{
        return h("div",{class:"c_blue"},"你好啊")
    }
</script>

浏览器部分

f12元素审查部分

扫描二维码关注公众号，回复： 17015973 查看本文章

看明白了吗。

h后面第一个参数就是要创建成什么元素标签，你也可以span，也可以a标签。

第二个参数就是这个标签有什么属性，比如我给div 加一个data-id就可以这么写

const btn=()=>{
        return h("div",{"data-id":"1",class:"c_blue"},"你好啊")
    }

第三个属性就是内容要显示啥文字了，当然，如果你的文字是先处理过才显示的，看我下面的代码

const btn=()=>{
        return h("div",{"data-id":"1",class:"c_blue"},{default:()=>{return 1==1?"1111":"2222"}})
}

看懂看吗，是可以以函数return形式返回的。

二、h()怎么在div下面再拼节点

<template>
    <btn/>
</template>
<script setup lang="ts">
    import {h} from "vue"
import { $ } from "vue/macros";
    const btn=()=>{
        return h(
            "div",
            {
                "data-id":"1",
                class:"c_blue"
            },
            [
                h("span","你好"),
                h("a",{href:"#"},"不好")
            ]
        )
    }
</script>

看明白了吗，其实h()博主理解是有函数重载的，也就是不用配置属性，直接设置返回的文字，像这样嵌套下去，你是不是可以嵌套好多子集，

博主写的很简单了，靠你悟性啦！接下去说说第三点

四、传值

好下面代码就是看你们的悟性

<template>
    <btn c="c_blue" b="标题"/>
</template>
<script setup lang="ts">
    import {h} from "vue"
    import { $ } from "vue/macros";
    const btn=(obj)=>{
        debugger
        return h(
            "div",
            {
                class:obj.c,
                "data-tit":obj.b
            },
            "你好啊"
        )
    }
</script>

对了属性那边你是可以onClick那些事件都可以写哦，也可以断点进来哦。

五、扩展

1、他有什么好处，我提一个点你估计就知道了，他可以封装在你的.ts的文件，你写通用组件也不用单独一个.vue（因为有些组件确实就是很简单，一个充值功能弹窗有时候就一个message包一个h("input")），

2、他也可以拿来放动态组件里

<template>
     <component :is="btn" c="c_blue" b="标题"></component>
    <!-- <btn c="c_blue" b="标题"/> -->
</template>
<script setup lang="ts">
    import {h} from "vue"
    import { $ } from "vue/macros";
    const btn=(obj)=>{
        debugger
        return h(
            "div",
            {
                class:obj.c,
                "data-tit":obj.b
            },
            "你好啊"
        )
    }
</script>

你就说好不好用吧。

对了记得去关注博主的微信公众号：“程序员野区”

博文原创，且看且珍惜吧，毕竟都35了，不定能在写几年博客，所以本博文如果对你有帮助，记得也去关注下博主的公众号，公众号菜单有好东西。信则有