Vue的Render函数的参数

Vue的Render函数的参数

render函数返回值的第一个参数：必选

​ 可选类型：1、string：html标签

​ 2、object：一个含有数据选项的对象

​ 3、function：返回一个含有数据选项的对象

示例：

    Vue.component('child', {
        props: ['level'],
        render: function (createElement) {
            //string:html标签
            return createElement('h1')
            //object：一个含有数据选项的对象
            return createElement({
                template: '<div>谈笑风生</div>'
            })
            //function:返回一个含有数据选项的对象
            var domFun = function () {
                return {
                    template: `<div>谈笑风生</div>`
                }
            }
            return createElement(domFun())
        }
    })

render函数返回值的第二个参数：可选

第二个参数是数据对象。只能是object

• class
• style
• attrs
• domProps
• props
• on
• nativeOn
• directives
• scopedSlots
• slot
• key
• ref

    Vue.component('child', {
        props: ['level'],
        render: function (createElement) {
            return createElement('div', {
                class: {
                    foo: true,
                    baz: false
                },
                style: {
                    height: '34px',
                    background: 'orange',
                    fontSize: '16px'
                },
                //正常的html特性(除了class和style)
                attrs: {
                    id: 'foo',
                    title: 'baz'
                },
                //用来写原生的DOM属性
                domProps: {
                    innerHTML: '<span style="color:blue;font-size:24px">江心比心</span>'
                }
            })
        }
    })

render函数返回值的第三个参数-代表子节点：可选

类型：String|Array

    Vue.component('child', {
        props: ['level'],
        render: function (createElement) {
            return createElement('div', [
                createElement('h1', '我是大标题'),
                createElement('h2', '我是二标题'),
                createElement('h3', '我是三标题')
            ])
        }
    })

Render函数中的CreateElement可以使用h代替

示例：

 render: (h, params) => {
              return h("div", [
                h(
                  "Tag",
                  {
                    props: {
                      color: this.getStatusColor(params.row.status)
                    },
                    on: {
                      "on-ok": () => {
                        this.handleChangeStatus(params.row);
                      }
                    }
                  },
                  params.row.statusName
              )
              ]);
          }