到底什么是render函数？它就是一个方法，一个能创建组件的方法，一个能创建带有属性的组件的方法，其实也是一个普通的vue（因为一个render的vue中，可以写与vue一样的data,methods,props...）。

注意，有了render，你就不必写template了，因为它的参数中就是html模板内容

1、怎么写render

创建一个vue文件（可理解为，这就是一个普通的组件文件）,然后在一个空白页中引入

<script>
export default {
  render(createElement, context) {
    var self = this
    return createElement('div', '我是内容')
  },
}
</script>

2 render中的createElement参数

2.1 基础设置

createElement(

'div', //1 标签名

{ //2 属性区

class:{},

style:{},

attrs:{}

},

'我是内容' //3 标签的内容区

)

createElement就是一个方法，其中接收三个参数，

1. '标签名'：合法的html标签，如div，p,span等等，同时，你也可以放自定义的组件
2. 属性：class,style，其中class与style必须是遵循对象写法，或者数组写法,attrs(其它属性)其它的自定义属性，如<div data-id="123" id  >...</div>，像基本属性和自定义的属性就可以放到attrs中设置，比如src,id,这些是常用的属性，data-id为自定义属性，通通放到attrs中
3. 就是内容区，相当于Html标签的内容，默认为字符文字，如果有多个就必须以数组形式设置，注意，如果内容区为其它组件，一定要用createElement(组件)这种写法，否则报错eg:['<i>lalala</i>', createElement(MyUpload)]

<script>
import LlUpload from '@/components/ant/upload/LlUpload.vue'

export default {
  render(createElement, context) {
    var self = this
    return createElement('div', ['我是内容', createElement(LlUpload)])
  },
}
</script>

绿色框的内容就是我在render中引入的自己的组件

注意，如果你的内容区为【字符文字】，如['hello','world'....]，那么它实际上就是一串文字，且不分开，如下图所示

 2.2 属性如何设置

createElement中的第二个参数就是设置html的各种属性的，比如class,style,及其它属性。比如我要给我的组件加class,style，如下图所示，设置你的class,style(注意是对象)即可，仔细看它最终渲染的html

<script>
import LlUpload from '@/components/ant/upload/LlUpload.vue'

export default {
  render(createElement, context) {
    var self = this
    return createElement(
      'div',
      {
        class: 'my-test',
        style: {
          background: 'green',
        },
      },
      ['我是内容', 'hello', 'world', createElement(LlUpload)]
    )
  },
}
</script>
<style scoped>
.my-test {
  color: red;
}
</style>

同理，除了class（my-test的样式就写在文件下方，跟普通vue文件一样，当然也可以是全局样式）,style，其它属性用attrs:{}包裹起来，如id,src,自定义属性

<script>
import LlUpload from '@/components/ant/upload/LlUpload.vue'

export default {
  render(createElement, context) {
    var self = this
    return createElement(
      'div',
      {
        class: 'my-test',
        style: {
          background: 'green',
        },
        attrs: {
          id: 'a001',
          src: 'www.baidu.com',
          'data-id': 'pro_0001',
        },
      },
      ['我是内容', 'hello', 'world', createElement(LlUpload)]
    )
  },
}
</script>
<style scoped>
.my-test {
  color: red;
}
</style>

 

2.3 如何加事件？

其实也在createElement第二个参数中加，如下图

<script>
import LlUpload from '@/components/ant/upload/LlUpload.vue'

export default {
  render(createElement, context) {
    var self = this
    return createElement(
      'div',
      {
        class: 'my-test',
        style: {
          background: 'green',
        },
        attrs: {
          id: 'a001',
          src: 'www.baidu.com',
          'data-id': 'pro_0001',
        },
        on: {
          click: function () {
            console.log(this)
            console.log('你点击了我')
          },
        },
      },
      ['我是内容', 'hello', 'world', createElement(LlUpload)]
    )
  },
}
</script>
<style scoped>
.my-test {
  color: red;
}
</style>

 

注意，这个事件中，可没有this实例，其值为null，

其实，我的代码相当于给组件的根加了一个@click="..."事件，只做演示，了解即可。

其实还有其它的属性可以加，我就不列举了。

 2.4 你也可以在render函数外面（同级）设置data,methods...就像写个普通vue一样，而render内部要想使用data,methods中的属性或方法怎么用呢，如下图所示

<script>
import LlUpload from '@/components/ant/upload/LlUpload.vue'

export default {
  data() {
    return {
      show: true,
      msg: 'hello test2.vue',
    }
  },
  render(createElement, context) {
    var self = this //此this像普通vue一样，可调用data或methods中的内容
    return createElement(
      'div',
      {
        class: 'my-test',
        style: {
          background: 'green',
        },
        attrs: {
          id: 'a001',
          src: 'www.baidu.com',
          'data-id': 'pro_0001',
        },
        on: {
          click: function () {
            console.log(this)
            console.log('你点击了我')

            //调用data中定义的属性
            console.log(self.show)
            console.log(self.msg)

            //调用methods中的方法
            self.getA()
          },
        },
      },
      ['我是内容', 'hello', 'world', createElement(LlUpload)]
    )
  },
  methods: {
    getA() {
      let _this = this
      console.log(_this)
    },
  },
}
</script>
<style scoped>
.my-test {
  color: red;
}
</style>

 结束，以上就是render的基础入门，具体的还请多去官网学习