vue render中jsx使用

JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析.

data(){
    return {
        dataconfig:{
            btnGroup:[{
                label:"查找"，
                type: 'search',
            },{
                label:"删除",
                type:'del'
            }],
            form:{
                label:"名字",
                value:"",
                placeholder:""
            },
            previewDialog:false,
        }
    }
}
methods:{
    handleInput(value){
        this.from.value = value
    },
    handleSync(value){
        this.previewDialog = value
    }
}
render(h){
    return(
        div
            {
             <!------------v-for的jsx实现------------->
                this.dataconfig.btnGroup.map((item, index) =>
                  <div class="input-item">
                    <el-button
                      //绑定点击事件（on-xxx）,触发：this.$emit('xxx', params)
                      on-click={(ev) => this.handleClick(ev, item.type)}
                      type="primary"
                      size="small"
                    >{ typeof item.text === 'underfined' ? item.text : ""}
                    </el-button>
                 </div>
                 )
            }
            <!------------v-model的jsx实现------------->
            {
                <el-input size="small"
                placeholder={form.placeholder}
                value={form.Value}
                on-input={(value) => this.handleInput(value)} />
            }
            {
            <!------------visible.sync的jsx实现------------->
              <el-dialog title="预览"
              visible={this.previewDialog}
              class={{ foo: true, bar: false }}
              style={{ color: 'red', fontSize: '14px' }}
              {...{ on: { 'update:visible': this.handleSync, 'close': this.closeDialog } }}
              >
                <div domPropsInnerHTML={this.previewData}></div>
              </el-dialog>
            }
            {
            <!------------
            slot-scoped的jsx实现<template slot-scoped="scope">{{scope.row}}</template>------------->
                <el-table-column 
                {   
                    ...{
                      scopedSlots: {
                        default: scope => {
                                console.log(scope)
                          }
                        }
                     }
                }
                >    
                </el-table-column>
            }
        </div>
    )
}
复制代码

引用：https://juejin.im/post/5c19d197e51d45467144ce29