Vue3 setup语法糖使用h函数

最新推荐文章于 2025-03-05 01:27:05 发布

天空下有你

最新推荐文章于 2025-03-05 01:27:05 发布

阅读量308

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/twilightLeaves/article/details/143359892

版权

Vue3 setup语法糖使用h函数

在<script setup>中使用h函数，需要进行导入import { h } from 'vue';

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

const vnode = h('div', { class: 'component-name', [scopeId]: '' }, [
    h('h1', { class: 'title', [scopeId]: '' }, 'Hello World'),
    h('p', { class: 'description', [scopeId]: '' }, 'This is a description.'),
    h('div', { class: 'box', [scopeId]: '' },‘’),
]);

</script>

然后将vnode引入模版

<template>
    <component :is="vnode"></component>
</template>

接着就是在h函数中的dom样式了

<script setup>
import { h, getCurrentInstance } from 'vue';
const instance = getCurrentInstance();
const scopeId = instance?.type.__scopeId; //  如果不使用这个，那么style中的样式将不能生效

const vnode = h('div', { class: 'component-name', [scopeId]: '' }, [
    h('h1', { class: 'title', [scopeId]: '' }, 'Hello World'),
    h('p', { class: 'description', [scopeId]: '' }, 'This is a description.'),
    h('div', { class: 'box', [scopeId]: '' },‘’),
]);
</script>
<style scoped lang="scss">
.component-name {
    height: 100%;
}

.title {
    padding: 10px 20px;
}

.description {
    padding: 5px 20px;
}
</style >