关于 Vue 中 h() 函数的一些东西

最新推荐文章于 2025-05-29 09:16:57 发布

「已注销」

最新推荐文章于 2025-05-29 09:16:57 发布

阅读量4.6k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_47367099/article/details/127546411

本文介绍了在 Vue 项目中如何使用 h() 函数结合 Element UI 的 Notification 组件来实现带有 HTML 片段的通知。h() 函数用于创建虚拟 DOM 节点 (vnodes)，并讲解了它的使用方式和作用。同时，文章探讨了 VNode 在 Vue 中的角色，包括其类型和缓存机制，强调了 VNode 对比和更新在性能优化中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在项目上需要一个信息弹窗，来显示信息。一开始只让它弹出了文字，而且只有一条信息。而给我的需求是多条文字和图片，而后我使用了element ui中的 Notification 通知组件来显示。当然，基础的 Notification 还不行，所以我使用了具有 HTML 片段的 Notification ，以及搭配 Vue 中的 h() 函数一起来使用。

下面是element ui 中给出的 Notification 组件（具有 HTML 片段的 Notification ）。

1 ElNotification({
2     title: 'HTML String',
3     dangerouslyUseHTMLString: true,//是否将 message 属性作为 HTML 片段处理
4     message: '<strong>This is <i>HTML</i> string</strong>',//正文内容
5   })

而要完成我的需求，只需在 Notification 的正文内容使用 h() 函数即可。

当我使用 h() 函数之后：

 1 ElNotification({
 2   title: 'HTML String',//标题
 3   type: 'warning',//类型
 4   offset: 80,//相对屏幕顶部的偏移量
 5   customClass: 'temperature',//自定义类名
 6   dangerouslyUseHTMLString: true,//是否将 message 属性作为 HTML 片段处理
 7   dur