vue3第二十五节(h()函数的应用)

2024-04-27 03:12

本文主要是介绍vue3第二十五节(h()函数的应用),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1、前言:

为什么vue 中已经有 template 模板语法,以及JSX了,还要使用 h()渲染函数;

vue 中选择默认使用template 静态模板分析,有利于DMO性能的提升,而且更接近真实的HTML便于开发设计人员理解修改,特别是对于熟练使用 HTML、CSS、JS的前端人员来说,更容易上手;

vue 中使用 h() 函数,可以更加方便的处理高度动态复杂渲染逻辑,相比而言比使用 template 模板 更加方便;但是由于渲染函数的性能消耗较大,所以一般不建议在开发中直接使用 h() 函数;并且在里面标签 属性 class 事件等杂糅一起,会难以理解;

2、定义:

h() 是一种能生成HTML的JavaScript
h() 函数 用于创建Vnodes 节点

用法:

接收三个参数
h(type, propsOrChildren, children)
type: 节点类型 字符串、对象、函数
propsOrChildren: 属性或子节点
children: 子节点

如:

// 除类型之外的所有参数都是可选的
h('div')
h('div', { id: 'foo' })//属性和属性都可以在道具中使用
//Vue会自动选择正确的分配方式
h('div', { class: 'bar', innerHTML: 'hello' })// props modifiers such as .prop and .attr can be added
// with '.' and `^' prefixes respectively
h('div', { '.name': 'some-name', '^width': '100' })// class 和 style 可以是对象或者数组
h('div', { class: [foo, { bar }], style: { color: 'red' } })// 定义事件需要加on 如 onXxx
h('div', { onClick: () => {} })// 子集可以字符串
h('div', { id: 'foo' }, 'hello')//如果没有props是可以省略props 的
h('div', 'hello')
h('div', [h('span', 'hello')])// 子数组可以包含混合的VNode和字符串
h('div', ['hello', h('span', 'hello')])
const Vnode = h('div', { class: 'my-div' }, 'h() 渲染内容')
渲染之后得到
<div class="my-div">h() 渲染内容</div>

具体如下:

<template>
<div class="my-h">
This is a h() demo .
<hr></hr>
<vnodeDiv></vnodeDiv>
</div>
</template>
<script setup>
import { ref, h } from 'vue'
const vnodeDiv = () => {return h('div', { class: 'my-div' }, 'h() 渲染内容')
}
</script>

3、h() 函数 渲染多层DOM

const vnodeDiv = () => {return h('div', { class: 'my-div', dataType:"ces" }, [h('p', [h('span', 'h()1 渲染内容')]),h('p', 'h()2 渲染内容'),h('p', 'h()3 渲染内容'),])
}

4、h() 函数 接收 props 中数据

<template>
<div class="my-h">
This is a h() demo .
<hr></hr>
<vnodeDiv :name="name"></vnodeDiv>
</div>
</template>
<script setup>
import { ref, h } from 'vue'
const name = ref('Andy')
// 这里与 setup() {} 一样,可以接收 props, context
// context.attrs, context.emit, context.slots
const vnodeDiv = (props, {attrs, emit, slots}) => {console.log('---props-', props)return h('div', { class: 'my-div', dataType:"ces" }, [h('p', [h('span', props.name)]), // Andyh('p', 'h()2 渲染内容'),h('p', 'h()3 渲染内容'),])
}
</script>

5、h() 函数 接收emit 事件

事件以驼峰方式命名onXxx 如:onClick: ()=>{}

<template>
<div class="my-h">
This is a h() demo .
<hr></hr>
<vnodeDiv :name="name" @click="handleClick"></vnodeDiv>
</div>
</template>
<script setup>
import { ref, h } from 'vue'
const name = ref('Andy')
const handleClick = (data) => {console.log('====', data) // 这里得到子组件 触发事件 的参数
}
const vnodeDiv = (props, {attrs, emit, slots}) => {console.log('---props-', props)return h('div', { class: 'my-div', dataType:"ces" }, [h('p', {onClick: () => {// 使用emit 触发父组件事件emit('click', props.name)}}, 'h()2 渲染内容')])
}
</script>

6、h() 函数 定义插槽 slots

通过 slots.xxx 语法定义插槽
如:匿名插槽 slots.default具名插槽 slots.footer

<div class="my-h">
This is a h() demo .
<hr></hr>
<vnodeDiv :name="name" @click="handleClick"><template #default><div class="default-">这是默认插槽</div></template><template #footer><div class="default-footer">这是具名插槽 footer </div></template>
</vnodeDiv>
</div>
</template>
<script setup>
import { ref, h } from 'vue'
const name = ref('Andy')
const handleClick = (data) => {console.log('====', data) // 这里得到子组件 触发事件 的参数
}
const vnodeDiv = (props, {attrs, emit, slots}) => {console.log('---props-', props)return h('div', { class: 'my-div', dataType:"ces" }, [h('p', [h('span', props.name)]),h('p', {onClick: () => {emit('click', props.name)}}, 'h()2 渲染内容'),h('p', 'h()3 渲染内容'),// 定义默认插槽  // 具名插槽 footer 这里可以定义多个插槽名称], slots.default(), slots.footer())
}
</script>

7、h() 函数 渲染列表

<template>
<div class="my-h">
This is a h() demo .
<hr></hr>
<vnodeDiv :name="name" @click="handleClick"><template #default><div class="default-">这是默认插槽</div></template><template #footer><div class="default-footer">这是具名插槽 footer </div></template>
</vnodeDiv>
</div>
</template>
<script setup>
import { ref, h } from 'vue'
const name = ref('Andy')
const lists = ref([{ name: 'Andy1', age: 18 },{ name: 'Andy2', age: 19 },{ name: 'Andy3', age: 22 },
])
const handleClick = (data) => {console.log('====', data) // 这里得到子组件 触发事件 的参数
}
const vnodeDiv = (props, {attrs, emit, slots}) => {console.log('---props-', props)return h('div', { class: 'my-div', dataType:"ces" }, [// 接收 props 中的数据h('p', [h('span', props.name)]),h('p', {onClick: () => {emit('click', props.name)}}, 'h()2 渲染内容'),// 循环渲染列表h('p', lists.value && lists.value.length && lists.value.map(itm => {return h('p', [h('span', itm.name), '~', h('span', itm.age)])})),// 定义默认插槽], slots.default(), slots.footer())
}
</script>

运行结果如下:
请添加图片描述
对于 h() 函数 与 JSX 语法的使用,个人感觉 JSX 语法更灵活方便。

这篇关于vue3第二十五节(h()函数的应用)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/939379

相关文章

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

MySQL 中的 CAST 函数详解及常见用法

《MySQL中的CAST函数详解及常见用法》CAST函数是MySQL中用于数据类型转换的重要函数,它允许你将一个值从一种数据类型转换为另一种数据类型,本文给大家介绍MySQL中的CAST... 目录mysql 中的 CAST 函数详解一、基本语法二、支持的数据类型三、常见用法示例1. 字符串转数字2. 数字

Python内置函数之classmethod函数使用详解

《Python内置函数之classmethod函数使用详解》:本文主要介绍Python内置函数之classmethod函数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 类方法定义与基本语法2. 类方法 vs 实例方法 vs 静态方法3. 核心特性与用法(1编程客

Python函数作用域示例详解

《Python函数作用域示例详解》本文介绍了Python中的LEGB作用域规则,详细解析了变量查找的四个层级,通过具体代码示例,展示了各层级的变量访问规则和特性,对python函数作用域相关知识感兴趣... 目录一、LEGB 规则二、作用域实例2.1 局部作用域(Local)2.2 闭包作用域(Enclos

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提

MySQL count()聚合函数详解

《MySQLcount()聚合函数详解》MySQL中的COUNT()函数,它是SQL中最常用的聚合函数之一,用于计算表中符合特定条件的行数,本文给大家介绍MySQLcount()聚合函数,感兴趣的朋... 目录核心功能语法形式重要特性与行为如何选择使用哪种形式?总结深入剖析一下 mysql 中的 COUNT

Java MQTT实战应用

《JavaMQTT实战应用》本文详解MQTT协议,涵盖其发布/订阅机制、低功耗高效特性、三种服务质量等级(QoS0/1/2),以及客户端、代理、主题的核心概念,最后提供Linux部署教程、Sprin... 目录一、MQTT协议二、MQTT优点三、三种服务质量等级四、客户端、代理、主题1. 客户端(Clien

MySQL 中 ROW_NUMBER() 函数最佳实践

《MySQL中ROW_NUMBER()函数最佳实践》MySQL中ROW_NUMBER()函数,作为窗口函数为每行分配唯一连续序号,区别于RANK()和DENSE_RANK(),特别适合分页、去重... 目录mysql 中 ROW_NUMBER() 函数详解一、基础语法二、核心特点三、典型应用场景1. 数据分

MySQL数据库的内嵌函数和联合查询实例代码

《MySQL数据库的内嵌函数和联合查询实例代码》联合查询是一种将多个查询结果组合在一起的方法,通常使用UNION、UNIONALL、INTERSECT和EXCEPT关键字,下面:本文主要介绍MyS... 目录一.数据库的内嵌函数1.1聚合函数COUNT([DISTINCT] expr)SUM([DISTIN

Python get()函数用法案例详解

《Pythonget()函数用法案例详解》在Python中,get()是字典(dict)类型的内置方法,用于安全地获取字典中指定键对应的值,它的核心作用是避免因访问不存在的键而引发KeyError错... 目录简介基本语法一、用法二、案例:安全访问未知键三、案例:配置参数默认值简介python是一种高级编