vue render函数

render函数接收一个参数createElement，这个参数createElement又是一个函数,render函数必须返回一个createElement，而这个createElement按照vue的套路一般简写成单词h，createElement函数接收三个参数：

 

参数一：需要创建的标签，一般是一个字符串如'div' ,也可以是对象或者函数

写法示例:

    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())
        }
    })

参数二：参数一的一些属性、绑定值等等，如样式style，一般写成对象形式

写法示例：

h("Icon", {
                // 接收的参数
                props: {
                  type: "md-archive",
                },
                // 元素的样式
                style: {
                  marginLeft: "7px",
                  fontSize: "16px",
                  cursor: "pointer",
                },
                // 元素绑定的事件
                on: {
                  click: () => {
                    this.$refs.table.exportCsv({
                      filename: "The original data",
                    });
                  },
                },
              }),

  h("Icon", {
                props: {
                  type: "ios-print",
                },
                style: {
                  marginLeft: "7px",
                  fontSize: "16px",
                  cursor: "pointer",
                },
                // 自定义指令
                directives: [
                  {
                    name: "print", // 自定义指令（不包括前缀'v'）
                    value: "#printObj", // 指令绑定的值
                  },
                ],
              }),

参数三：第一个参数的子元素，这个可以是字符串也可以是数组形式、具体看你第一个元素包含多少个子元素

注：如果h的参数只有两个，且第二个参数是数组或者字符串形式那就表示第二个参数是子元素

参考资料：Vue-render函数的三个参数 - 简书