记录Vue生成VNode的使用方式

本文主要是介绍记录Vue生成VNode的使用方式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

背景

想要做一个网页端的聊天提醒，使用elementUi的notify组件，有消息来的时候直接弹出，但是在弹出层里面想要放置一个按钮，点击按钮可以直接弹出回复框这样子的，所以就需要在notify的message属性中使用VNode来渲染按钮。

正文

使用Vue的this.$createElement来创建VNode
具体的函数使用可以百度

可以参考这篇博客:https://www.cnblogs.com/yuxiaole/p/9353031.html

首先上效果图:

然后是代码:

const h = this.$createElement;this.$notify({title: '私聊消息',message:h('div', null, [h('span', null, this.chatLog),h('br',null),h('button', {on:{click:()=>{this.replyPrivateChat(data.userId)}}}, "回复")]),duration: 0,position: 'bottom-right',dangerouslyUseHTMLString: true,});

其中需要注意一下的是:
在为button绑定click方法的时候，应当注意是函数本身，而不是一个函数的引用，如果写成函数的引用如:

####错误示范####
h('button', {on:{click: this.replyPrivateChat(data.userId)}}, "回复")

则会发现单击无效，仅在消息提醒进来渲染dom的时候会被触发一次！

这篇关于记录Vue生成VNode的使用方式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---