记录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的时候会被触发一次！