vue-antd function(h)加载组件的写法

笔记

const _HHPaymentAmtSame = Object.create(HHPaymentAmtSame);
const h = this.$createElement;
const modal = this.$warning({
    title: this.WARNING_TITLE,
    width: 900,
    content: h(_HHPaymentAmtSame, {
        props: {
            invoiceUuid: this.invoiceUuid,
            info: this.basicInfo.info
        },
        on: {
            close: () => {
                modal.destroy();
            }
        }
    })
});

注销部分是简单的写法，但是复杂的内容不利于书写，所以用下面的写法 HHPaymentAmtSame 是一个写好的vue组件，这样就可以正常渲染了。

知识点

$createElement 参数：

const h=this.$createElement;

h('span', tag, '内容可以是 ')

tag完整的数据对象如下：

{
// 和v-bind:class一样的 API
'class': {
foo: true,
bar: false
},
// 和v-bind:style一样的 API
style: {
color: 'red',
fontSize: '14px'
},
// 正常的 HTML 特性
attrs: {
id: 'foo'
},
// 组件 props
props: {
myProp: 'bar'
},
// DOM 属性
domProps: {
innerHTML: 'baz'
},
// 事件监听器基于 "on"
// 所以不再支持如 v-on:keyup.enter 修饰器
// 需要手动匹配 keyCode。
on: {
click: this.clickHandler
},
// 仅对于组件，用于监听原生事件，而不是组件使用 vm.$emit 触发的事件。
nativeOn: {
click: this.nativeClickHandler
},
// 自定义指令. 注意事项：不能对绑定的旧值设值
// Vue 会为您持续追踨
directives: [{
name: 'my-custom-directive',
value: '2'
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}],
// 如果子组件有定义 slot 的名称
slot: 'name-of-slot'
// 其他特殊顶层属性
key: 'myKey',
ref: 'myRef'
}

参考地址