vue3 h() api

vue3 h() api

h() 介绍及使用

h()函数返回一个VNode（虚拟节点），用于渲染函数render()

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

	export default {
		render () {
			return h('h1', {}, 'Hi')
		},
	}
</script>

上述写法等同于

<template>
	<h1>Hi</h1>
</template>
<script >

</script>

h()参数介绍

h()函数可最多接收三个参数： type，props和children

type

参数类型：String | Object | Function
HTML 标签名、组件、异步组件或函数式组件。使用返回 null 的函数将渲染一个注释。
必选。
下面这个例子出入一个组件

<script >
	import {h, defineComponent} from 'vue';

	const MyComponent = defineComponent({
		render () {
			return h('h1', {}, 'this is MyComponent')
		},
	})

	export default {
		render () {
			return h(MyComponent)
		},
	}
</script>

渲染结果

props

参数类型：object
一个对象。
可选。
下面的例子出入一个样式参数和一个prop参数

<script >
	import {h, defineComponent} from 'vue';

	const MyComponent = defineComponent({
		props: {
			title: {
				type: String,
				required: true
			}
		},
		render () {
			return h('h1', {}, this.title + ', this is MyComponent')
		},
	})

	export default {
		render () {
			return h(MyComponent, {
				style: 'color: red',
				title: 'Hi'
			})
		},
	}
</script>

渲染结果

children

参数类型：String | Array | Object
一个或者多个文本VNode或者h()生产的VNode

<script >
	import {h, defineComponent} from 'vue';

	const MyComponent = defineComponent({
		render () {
			return h('h1', {}, 'this is MyComponent')
		},
	})

	export default {
		render () {
			return h('div', {
				style: 'color: red'
			}, ['Hi', h(MyComponent)])
		},
	}
</script>

渲染结果