Vue h函数的使用详解


Posted in Vue.js onFebruary 18, 2022

一、认识

文档:https://v3.cn.vuejs.org/guide/render-function.html#dom-%E6%A0%91

​ h() 到底会返回什么呢?其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription,因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点,包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”,也常简写它为 VNode 。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

二、使用

文档:https://v3.cn.vuejs.org/guide/render-function.html#h-%E5%8F%82%E6%95%B0

1、h() 参数

h() 函数是一个用于创建 VNode 的实用程序。也许可以更准确地将其命名为 createVNode(),但由于频繁使用和简洁,它被称为 h() 。它接受三个参数:

// @returns {VNode}
h(
    // {String | Object | Function} tag
    // 一个 HTML 标签名、一个组件、一个异步组件、或
    // 一个函数式组件。
    //
    // 必需的。
    'div',

    // {Object} props
    // 与 attribute、prop 和事件相对应的对象。
    // 这会在模板中用到。
    //
    // 可选的(在开发时。建议传,实在没有传的时候,传入 null)
    {},

    // {String | Array | Object} children
    // 子 VNodes, 使用 `h()` 构建,
    // 或使用字符串获取 "文本 VNode" 或者
    // 有插槽的对象。
    //
    // 可选的。
    [
        'Some text comes first.',
        h('h1', 'A headline'),
        h(MyComponent, {
            someProp: 'foobar'
        })
    ]
)

2、简单的使用

Vue h函数的使用详解

3、实现一个计数器案例

<script>
/* 设置样式需要在这引入,如果使用style标签,则不能写scoped,不利于设置局部样式,所以不建议 */
import "./style.css"
import { h, ref } from "vue";

export default {
    // data 的写法
    // data() {
    //     return {
    //         counter: 0
    //     }
    // },
    setup() {
        const counter = ref(0)
        return { counter }
    },
    /**
     * 使用setup的时候,下面也可以用this,引入render有绑定this,所以下面取值,要用this
     */
    render() {
        return h("div", null, [
            h("h1", null, `当前计数:${this.counter}`),
            h("button", { onClick: () => this.counter++, class: "button" }, "加 1"),
            h("button", { onClick: () => this.counter--, class: "button" }, "减 1")
        ])
    }
}
</script>

修改成纯setup的写法:

<script>
/* 设置样式需要在这引入,如果使用style标签,则不能写scoped,不利于设置局部样式,所以不建议 */
import "./style.css"
import { h, ref } from "vue";

export default {
    // data 的写法
    // data() {
    //     return {
    //         counter: 0
    //     }
    // },
    setup() {
        const counter = ref(0)
        return () => {
            return h("div", null, [
                h("h1", null, `当前计数:${counter.value}`),
                h("button", { onClick: () => counter.value++, class: "button" }, "加 1"),
                h("button", { onClick: () => counter.value--, class: "button" }, "减 1")
            ])
        }
    }
}
</script>

4、函数组件和插槽的使用

1)父组件

<script>
import { h, ref } from "vue";
import Test from "./components/Test.vue"
export default {
    setup() {
        return {}
    },
    render() {
        return h(Test, null, {
            // default 对应的是一个函数,default是默认插槽
            default: props => h("span", null, "父传入到组件中的内容:" + props.name)
        })
    }
}
</script>

2)子组件

<script>
import { h } from "vue";

export default {
    /**
     * 接收夫传入的内容
     */
    render() {
        return h("div", null, [
            h("div", null, "我是子组件"),
            /**
             * 在这判断别人是否传入
             * 也可以写 null,啥也不展示
             * 也可以在传入一个参数,使用的是 函数传参
             */
            this.$slots.default ? this.$slots.default({ name: "哈哈哈" }) : h("div", null, "我是子组件的默认值")
        ])
    }
}
</script>

注:在项目中,如果你像上面一样写代码,就太苦逼了,所以这个时候就要用 JSX。

三、jsx的使用

1、jsx的认识

jsx我们通常会通过Babel来进行转换(React编写的jsx就是通过babel转换的);

对于Vue来说,我们只需要在Babel中配置对应的插件即可;

文档:https://v3.cn.vuejs.org/guide/render-function.html#jsx

2、下载Babel插件支持vue(现在貌似脚手架直接支持)

npm install @vue/babel-plugin-jsx -D

3、配置babel

1)在根目录下创建 .babel.config.js

2)在.babel.config.js 里面加入,如下代码

module.exports = {
    presets: [
        "@/vue/cli-plugin-babel/preset"
    ],
    plugins: [
        "@vue/babel-plugin-jsx"
    ]
}

4、简单的使用

<script>
import { ref } from 'vue'
export default {
    setup() {
        let counter = ref(0)
        return { counter }
    },
    render() {
        return (
            <div>
                <div>JSX的使用</div>
                <h2>当前数字:{this.counter}</h2>
            </div>


        )
    }
}
</script>

5、计数器案例

<script>
import { ref } from '@vue/reactivity'

export default {
    setup() {
        let counter = ref(0)
        function add() {
            counter.value++
        }
        function decrement() {
            counter.value--
        }
        return { counter, add, decrement }
    },
    render() {
        return (
            <div>
                <div>JSX的使用</div>
                <h2>当前数字:{this.counter}</h2>
                <button onClick={this.add}>加 1</button>
                <button onClick={this.decrement} >减 1</button>
            </div >
        )
    }
}
</script>

6、组件和插槽的使用

1)父组件

<script>
import { ref } from '@vue/reactivity'
import Test from "./components/Test.vue"
export default {
    setup() {
        let counter = ref(0)
        function add() {
            counter.value++
        }
        function decrement() {
            counter.value--
        }
        return { counter, add, decrement }
    },
    render() {
        return (
            <div>
                <div>JSX的使用</div>
                {/* 如果这块使用setup里面的变量、方法 要加this */}
                <h2>当前数字:{this.counter}</h2>
                <button onClick={this.add}>加 1</button>
                <button onClick={this.decrement} >减 1</button>
                <hr />
                <Test>
                    {/* 这个里面写入传入的内容,也就是传入一个插槽 */}
                    {{ default: props => <p>我是父传入子的</p> }}
                </Test>
            </div >
        )
    }
}
</script>

2)子组件

<script>
export default {
    /**
     * 接收夫传入的内容
     */
    render() {
        return (
            <div>
                <p>我是组件</p>
                {/* 这块也有可能没穿,你要显示一个默认值,这个时候,你就要用三元运算符 */}
                {this.$slots.default()}
            </div>
        )
    }
}
</script>

 注:如果你要h函数来写组件,请仔细查看文档,以上讲解,只是入门级。

到此这篇关于Vue h函数的使用详解的文章就介绍到这了,更多相关Vue h函数内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue 插槽简介及使用示例
Nov 19 Vue.js
vue单元格多列合并的实现
Nov 26 Vue.js
如何实现vue的tree组件
Dec 03 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 #Vue.js
前端vue+express实现文件的上传下载示例
一篇文章告诉你如何实现Vue前端分页和后端分页
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 #Vue.js
vue3获取当前路由地址
Feb 18 #Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 #Vue.js
vue项目支付功能代码详解
Feb 18 #Vue.js
You might like
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
取得传值的函数
2006/10/27 Javascript
枚举JavaScript对象的函数
2006/12/22 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
python如何实现int函数的方法示例
2018/02/19 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
应届生幼儿园求职信
2013/11/12 职场文书
大二学习计划书范文
2014/04/27 职场文书
公司运动会策划方案
2014/05/25 职场文书
安全目标管理责任书
2014/07/25 职场文书
个人批评与自我批评
2014/10/15 职场文书
工作保证书怎么写
2015/02/28 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android