参考资料：专栏目录请点击
他一共跟三个参数
第一个参数
第二个参数
第三个参数
<script>
import { h } from 'vue'
export default {
setup() {
return () => h("h2", null, "Hello World")
}
}
</script>渲染效果如下
当然我们还可以使用rener函数进行渲染
<script>
import { h } from 'vue'
export default {
render() {
return h("h2", null, "Hello World")
}
}
</script>计数器
<script>
import { h } from 'vue'
export default {
data() {
return {
counter: 0
}
},
render() {
return h("div", null, [
h("h2", null, "计数器"),
h("h3", null, `计数${this.counter}`),
h("button", { onClick: () => this.counter++ },"点一下")
])
}
}
</script>渲染如下
我们先写一个组件HelloWorld.vue
<script setup lang="ts">
import { ref } from 'vue';
const param = ref("Hello World")
</script>
<template>
<h2>{{ param }}</h2>
</template>
<style scoped lang="less"></style>然后，我们在h函数中引入这个组件，他就会被渲染
<script>
import { h } from 'vue'
import HelloWorld from './HelloWorld.vue'
export default {
data() {
return {
counter: 0
}
},
render() {
return h("div", null, [h(HelloWorld)])
}
}
</script>
h函数同样支持插槽，我们把HelloWorld组件改成一个插槽组件
HelloWorld.vue
<script setup lang="ts">
import { ref } from 'vue';
const param = ref("Hello World")
</script>
<template>
<h2>{{ param }}</h2>
<slot></slot>
</template>
<style scoped lang="less"></style>index.ts
<script>
import { h } from 'vue'
import HelloWorld from './HelloWorld.vue'
export default {
data() {
return {
counter: 0
}
},
render() {
return h("div", null, [h(HelloWorld, {}, [h("div", null, "Hello Slot")])])
}
}
</script>最终渲染如下
