函数式编程，h函数

三种vue编写风格：

1. template模板方式
2. JSX方式
3. 函数式编程

函数时编程在Vue3使用的很少了，之前为什么会有这个，因为Vue单文件组件编译是需要过程，他会经过parser -> transform -> generate 而h函数直接跳过这三个阶段，所以性能上有很大的帮助。

主要会用到h函数

h 接收三个参数

1. type 元素的类型
2. propsOrChildren 数据对象, 这里主要表示(props, attrs, dom props, class 和 style)
3. children 子节点

h函数拥有多种组合方式

// 除类型之外的所有参数都是可选的
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')])

使用props传递参数

<template>
	<Btn text="按钮"></Btn>
</template>

<script setup lang='ts'>
import {h,} from 'vue';

type Props = {
	text: string
}
const Btn = (props: Props, ctx: any) => {
	return h('div', {
		class: 'p-2.5 text-white bg-green-500 rounded shadow-lg w-20 text-center inline m-1',
	
	}, props.text)
}
</script>

接受emit

<template>
	<Btn @on-click="getNum" text="按钮"></Btn>
</template>

<script setup lang='ts'>
import {h,} from 'vue';

type Props = {
	text: string
}
const Btn = (props: Props, ctx: any) => {
	return h('div', {
		class: 'p-2.5 text-white bg-green-500 rounded shadow-lg w-20 text-center inline m-1',
		onClick: () => {
			ctx.emit('on-click', 123)
		}
	}, props.text)
}

const getNum = (num: number) => {
	console.log(num);
}
</script>

定义插槽

<template>
	<Btn>按钮</Btn>
</template>

<script setup lang='ts'>
import {h} from 'vue';

type Props = {
	text: string
}
const Btn = (props: Props, ctx: any) => {
	return h('div', {
		class: 'p-2.5 text-white bg-green-500 rounded shadow-lg w-20 text-center inline m-1',
	
	}, ctx.slots.default())
}
</script>

写法2 ：

<template>
	<Btn @on-click="getNum">
		<template #default>
			按钮slots
		</template>
	</Btn>
</template>

<script setup lang='ts'>
import {h,} from 'vue';

type Props = {
	text?: string
}
const Btn = (props: Props, ctx: any) => {
	return h('div', {
		class: 'p-2.5 text-white bg-green-500 rounded shadow-lg w-20 text-center inline m-1',
		onClick: () => {
			ctx.emit('on-click', 123)
		}
	}, ctx.slots.default())
}

const getNum = (num: number) => {
	console.log(num);
}
</script>