vue3组合式API中渲染函数h渲染组件时的写法总结

渲染一个组件，赋值props，prop名称为驼峰写法

h(CUpload, {
    actionUrl: `/`,
    accept: 'image/png, image/jpeg, .pdf',
    showUploadButton: false,
    showRemoveButton: false,
    modelValue: record.respond.invitation_resp_files,
})

渲染一个组件，有子组件

h(CUpload, {
    actionUrl: `/`,
    accept: 'image/png, image/jpeg, .pdf',
    showUploadButton: false,
    showRemoveButton: false,
    modelValue: record.respond.invitation_resp_files,
}, () => [
    h(IconSearch, { size: 15 })
])

或者写成

h(CUpload, {
    actionUrl: `/`,
    accept: 'image/png, image/jpeg, .pdf',
    showUploadButton: false,
    showRemoveButton: false,
    modelValue: record.respond.invitation_resp_files,
}, h(IconSearch, { size: 15 }))

应该也可以

渲染一个组件，绑定点击事件

h(Button, {
    type: 'primary',
    shape: "circle",
    onclick: () => {
        console.log()
    }
},
() => [h(IconSearch, { size: 15 })]
)

渲染一个组件，传入v-model，传入具名插槽

h(InputNumber, {
    modelValue: record.percentage,
    hideButton: true,
    ["onUpdate:modelValue"]: (modelValue) => {
        record.percentage = modelValue
    },
}, { suffix: () => '%' })

渲染一个组件，传入作用域插槽，待研究