Vue3-JSX使用汇总

1、JSX绑定自定义事件

基本格式：on + xxxEvent 。如下所示模板绑定onColumnVisibleChange，在<operation-dialog/>内通过this.$emit('columnVisibleChange')进行回调触发

    render() {
        // 获取默认插槽的VNode列表
        let vNodes = this.$slots.default()
        return (
            <div>
                <el-table ref="table" {...this.$attrs}>
                    {vNodes}
                </el-table>
                <operation-dialog v-model:dialogVisible={this.dialogVisible} onColumnVisibleChange={ this.columnVisibleChange } />
            </div>
        )
    },

2、JSX下使用Slot

<el-dropdown>的下拉内容需要通过slot #default来填充，即：

<template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>Action 1</el-dropdown-item>
      </el-dropdown-menu>
</template>

在JSX填充此模板可定义slot对象，key值为Slot name，值即为模板内容。定义完毕后，可通过v-slots={slot}进行slot传递，如此，即可实现Slot在Jsx下的处理

    render(h) {
        const slot = {
            dropdown: () =>
                <el-dropdown-menu>
                    {this.dropDownButtonGroup.map((item) => {
                        return <li class='button-group-dropdown'>{item}</li>
                    })}
                </el-dropdown-menu>
        }

        return (
            <div class='table-button-group'>
                {this.normalButtonGroup}
                {this.dropDownButtonGroup.length > 0 ? (
                    <el-dropdown size='small' trigger='click' class='table-dropdown' v-slots={slot}>
                        <span class='el-dropdown-link'>
                            {this.text}<el-icon class='el-icon--right'><arrow-down /></el-icon>
                        </span>
                    </el-dropdown>
                ) : null}
            </div>
        )
    }