vue-之-render函数

3次阅读

共计 890 个字符，预计需要花费 3 分钟才能阅读完成。

vue 中的 render 函数应用过程：
API
基于 Iview
Button 组件

render: (h, params) => {

    return h('div', [
        h('Button', {
            props: {
                type: 'success',
                size: 'small'
            },
            style: {marginRight: '5px'},
            on: {click: () => {this.edit(params.index)
                }
            }
        }, '修改'),
        h('Button', {
            props: {
                type: 'error',
                size: 'small'
            },
            style: {marginRight: '5px'},
            on: {click: () => {this.del(params.index)
                }
            }
        }, '删除')
    ]);

}, render: (h, params) => {

    return h('div', [
        h('Button', {
            props: {
                type: 'success',
                size: 'small'
            },
            style: {marginRight: '5px'},
            on: {click: () => {this.edit(params.index)
                }
            }
        }, '修改'),
        h('Button', {
            props: {
                type: 'error',
                size: 'small'
            },
            style: {marginRight: '5px'},
            on: {click: () => {this.del(params.index)
                }
            }
        }, '删除')
    ]);

},

Switch 组件

render: (h, params) => {

    return h('i-switch', {
        props: {
            size: 'large',
            value: params.row.show === 1
        },
        scopedSlots: {open: () => h('span', '开启'),
            close: () => h('span', '关闭')
        },
        on: {'on-change': (value) => {console.log(params.index, value)
            }
        }
    });
},

关于 IviewUI 框架为什么 render 函数按钮可以用 Button，而开关却是 i -switch，我探索了一下 Iveiw 官网，发下官方解释如下图：

正文完