<script>
  export default {
    methods: {
      open4() {
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '内容可以是 '),
            h('i', { style: 'color: teal' }, 'VNode')
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 3000);
            } else {
              done();
            }
          }
        }).then(action => {
          this.$message({
            type: 'info',
            message: 'action: ' + action
          });
        });
      }
    }
  }
</script>
复制代码

解决思路

• 从这个组件提供的api进行来看的
  • 我们的需求是要给他传一个我们自己定义的html进去，并且还有自己的事件。这里面我们的思路不要走偏。就是他的vnode。只能是他进行传入了。其他都传不了。那就没问题，
• 顺着这条路我们往下走，传入vnode，那要怎么生成一个vnode，其实就是这个creteElement，这个是vue的，我们如何自己渲染一个vnode这个就开始查，查了半天就和这个createElement结合起来了，然后其实里面都是他的数据属性。无论是方法还是其他的都是vue的数据属性。
• vue建立一虚拟dom的方式就是通过这个createElement他更准确的名字可能是createNodeDescription。接收三个参数，1个是标签名，一个是他的包含相关属性的数据对象，第三个是他的子节点。然后就可以是返回值了。