vue：如何用js（h()函数/VNode类型）渲染dom

苦呀君

已于 2022-05-27 17:07:46 修改

阅读量2.3k

点赞数 2

分类专栏： # vue3 web前端文章标签： typescript vue

于 2022-05-27 17:02:16 首次发布

本文链接：https://blog.csdn.net/weixin_43856797/article/details/125006547

版权

在Vue 3.x中，使用setup语法和TypeScript，当需要根据动态数据决定展示特定组件时，可以借助h()函数和VNode。例如，在面包屑导航中，图标部分可能需要根据数据动态展示不同的组件。这里，数据结构包含VNode类型的icon。通过Vue的特殊属性`is`，可以正确地渲染这些VNode，实现动态组件渲染。官方文档中有关于`is`属性的详细说明。此外，还提供了一个使用该技术的vue3-ts-admin-demo项目作为示例。

摘要由CSDN通过智能技术生成

vue版本：3.x setup语法 + ts
涉及技术：h()，VNode，vue特殊attribute is

比如有一种情况，当前dom元素下要动态获取数据的展示某种组件，也就是说js部分不仅控制展示的文字内容，还要决定展示何种component，如何实现？
具体举一个🌰：
使用naive-ui的面包屑，而icon所采用的是xicons，xicons所引入的格式并不是常见的icon组件所使用一个string字段来表示name，而是直接引入一个component即vnode格式，如下截图可以看出： xicon ts定义
实现效果：

这是模拟的一个面包屑列表数据结构：

import {
    Accessibility, Alarm, AmericanFootballSharp } from "@vicons/ionicons5";

const breadcrumbList = [
    {
    name: "菜单1", icon: Accessibility },
    {
    name: "菜单2", icon: Alarm },
    {
    name: "菜单3"