vue中render函数

Vue.component('anchored-heading',{
    render: function(createElement){
        return createElement(
            'h' + this.level,
            this.$slots.default
        )
    }
})

//createElement参数
createElement(
    //{String | Object | Function}
    //一个HTML标签，组件设置，一个函数
    //必须return上述其中一个
    'div',
    //{Object}
    //一个对应属性的数据对象
    //可以在template中使用，可选项
    {
        //v-bind:class/v-bind:style在vnode数据对象中，为最高级配置
        'class':{
            foo:true,
            bar:false
        },
        style:{
            color: 'red',
            fontSize: '14px',
        },
        attrs: {
            id: 'foo'
        },
        //组件props
        props: {
            myProp: 'bar'
        },
        //dom属性
        domProps: {
            innerHTML: 'baz'
        },
        //事件监听器，不支持修饰器，需要手动匹配keyCode
        on: {
            click: this.clickHandler
        },
        //仅对于组件，用于监听原生事件，而不是组件使用vm.$emit触发的事件
        nativeOn:{
            click: this.nativeClickHandler
        },
        //自定义指令，注意：不能对绑定的旧值设置
        directives: [
            {
                name:"my-custom-directive",
                value:"2",
                expression: "1+1",
                arg:"foo",
                modifiers:{
                    bar: true
                }
            }
        ],
        slot:"name-of-slot",
        key:"myKey",
        ref:"myRef"
    },
    //{String | Array}
    //子节点，可选项
    [
        createElement('h1','hello world'),
        createElement(myComponent,{
            props: [
                someProp: 'foo'
            ]
        }),
        'bar'
    ]
)