記錄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的時候會被觸發一次！