vue-之-render函数

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官网,发下官方解释如下图:

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理