建设网站的公司网站交易网
目录
第一章 前言
第二章 h函数的使用
2.1 h函数语法
2.2 原生标签渲染
2.3 组件渲染
2.4 渲染多个标签/组件
2.5 slot插槽渲染
2.6 例子
第一章 前言
以下是官方文档下对h函数的一些说明与使用：
https://cn.vuejs.org/guide/extras/render-function.html#creating-vnodes
渲染函数 API | Vue.js
在绝大多数情况下，Vue 推荐使用模板语法来创建应用。然而在某些使用场景下，我们真的需要用到 JavaScript 完全的编程能力。这时渲染函数就派上用场了。
小编在该篇文章中主要说明一下h函数使用的场景和如何使用！
第二章 h函数的使用
2.1 h函数语法
- 1.type: 第一个参数既可以是一个字符串 (用于原生元素) 也可以是一个 Vue 组件
- 2.props: 要传的参数，可以理解成<div class="test" id="test" @click="handleClick" />标签上所有的属性都可以写在props里面，但是如果是事件监听器需要以 onXxx 的形式书写
- 3.children: 子节点,可以是字符串，也可以是数组包含多个节点，也可以是对象针对于组件的插槽
- 注意： h函数必须只有一个根节点，如果需要一次性渲染多个组件，需要在children中实现
import { h } from 'vue'// 完整参数
/*1.type: 第一个参数既可以是一个字符串 (用于原生元素) 也可以是一个 Vue 组件2.props: 要传的参数，可以理解成<div class="test" id="test" @click="handleClick" />标签上所有的属性都可以写在props里面，但是如果是事件监听器需要以 onXxx 的形式书写3.children: 子节点,可以是字符串，也可以是数组包含多个节点，也可以是对象针对于组件的插槽
*/
const VNod = h(type: string | Component,props?: object | null,children?: Children | Slot | Slots
)
2.2 原生标签渲染
import { h } from 'vue'// const vnode1 = h(
// 'div', // type
// { id: 'foo', class: 'bar' }, // props
// [] || '' // children
// )const message = ref('这是一个h函数渲染的div')
const vnode2 = h('div',{class: 'div-test',style: {color: 'red'},onclick: ()=> {console.log('点击输出');}},message.value
)const vnode3 = h('div')
……2.3 组件渲染
// DownOutlined是antd的图标组件
h(DownOutlined, { style: { 'font-size': '12px' } })
2.4 渲染多个标签/组件
// h函数必须只有一个根节点，如果需要一次性渲染多个组件，需要在children中实现
h('div',{class: 'w-full gap-x-3 flex items-center justify-start'},[h('span', null)h('span', null, record.seqNumber)]
)2.5 slot插槽渲染
// 这是antd的Tooltip, default为默认插槽
h(Tooltip, { title: str }, { default: () => showStr })
// 自定义组件HelloWorld，default为默认插槽，header为具名插槽
h(HelloWorld, { msg: message.value,onClick: (value)=> {console.log(value);},},{default: ()=> h('div', '我是 HelloWorld 组件的默认插槽里面的值'),header: ()=> h('div', '我是 HelloWorld 组件的 header 插槽里面的值'),}
)
2.6 例子
以下只是小编在实战中使用的一段代码：
// 利用一段三目运算活用
// 小编这里之所以props传null是因为不传会报错，但是官网说明是可选的，具体看大家敲代码时的具体情况了
return !isSub? h('div',{class: 'w-full gap-x-3 flex items-center justify-start'},[record.childList.length? expandedRowsSet.value.has(record.id)? h(CaretDownOutlined, {onClick: () => removeExpanedRow(record.id)}): h(CaretRightOutlined, {onClick: () => addExpanedRow(record.id)}): h('span', null),h('span', null, record.seqNumber)]): h('span', null)