vue的h函数和template语法如何混用？

news2024/10/8 20:25:19

前言：

h函数定义：

我们编写的代码转化为真正的dom时，首先会先转换为VNode,然后多个Vnode进行结合起来转化为VDOM，最后VDOM才渲染成真实的DOM。在 Vue.js 中，h 函数是 createElement 的别名，它是 Vue 用来创建虚拟 DOM 节点(vnode)的一个函数。这个函数在编写渲染函数（render functions）时非常有用。通过使用 h 函数，你可以更加灵活地控制应用的输出结构，而不是仅仅依赖于模板。

h函数怎么使用，请看这篇博客：vue不得不会的h函数

那么我们有些场景难免会遇到h函数和template语法混用的时候，那么我们怎么样才能把h函数和template结合起来使用呢？

template语法版本：

<template>
  <div> 
    新页面
    ...
  </div>
</template>
 
<script setup lang="ts">
...
</script>
 
<style lang="less" scoped>
...
</style>

h函数版本：

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

export default {
  setup() {
    return () => h("div", null, "新页面...");
  },
};
</script>

思路：

React框架里一个函数就是一个组件，如果我们能把vue里h函数定义的函数也做成一个组件，那么我们不就能在template里进行调用了嘛~

在这里vue提供了一个api，叫做defineComponent就可以帮我们很好的实现，把h函数定义的函数做成一个单独的函数组件。

演示代码：

<template>
    <div>
        <h1>测试h函数与template语法混用</h1>
        <div>
            <hChildren info="number" />
        </div>
    </div>
</template>

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

const hChildren = defineComponent({
    props: {
        info: {
            type: String,
            default: ''
        }
    },
    setup() {
        return (props) => h('div',null,`123456 is ${props.info}`)
    }
});
</script>

效果图：