Vue之render函数

render方法的实质就是生成template模板；
通过调用一个方法来生成，而这个方法是通过render方法的参数传递给他的；
通过这三个参数，可以生成一个完整的模板

官网实例

//未使用render函数Vue.component('anchored-heading', {  template: '#anchored-heading-template',  props: {    level: {      type: Number,      required: true    }  }})//使用render函数Vue.component('anchored-heading', {  render: function (createElement) {    return createElement(      'h' + this.level,   // tag name 标签名称      this.$slots.default // 子组件中的阵列    )  },  props: {    level: {      type: Number,      required: true    }  }})

说明

1. 区别：
   
   • 没有显示的模板内容，而是通过render方法生成
   • 使用了createElement方法
2. createElement方法，通过render函数的参数传递进来，有三个参数：
   
   • 第一个参数（必要参数）：主要用于提供DOM的html内容，类型可以是字符串、对象或函数
   • 第二个参数（类型是对象，可选）：用于设置这个DOM的一些样式、属性、传的组件的参数、绑定事件之类
   • 第三个参数（类型是数组，数组元素类型是VNode，可选）：主要是指该结点下还有其他结点，用于设置分发的内容，包括新增的其他组件。注意，组件树中的所有VNode必须是唯一的

slots

this.$slots
获取VNode列表中的静态内容

render: function (createElement) {  // `<div><slot></slot></div>`  return createElement('div', this.$slots.default)}

this.$scopedSlots
获取用作函数的作用域插槽，这个函数返回VNode

render: function (createElement) {  // `<div><slot :text="msg"></slot></div>`  return createElement('div', [    this.$scopedSlots.default({      text: this.msg    })  ])}

用render函数向子组件中传递作用域插槽，利用VNode数据中的scopedSlots域

render (createElement) {  return createElement('div', [    createElement('child', {      // pass `scopedSlots` in the data object      // in the form of { name: props => VNode | Array<VNode> }      scopedSlots: {        default: function (props) {          return createElement('span', props.text)        }      }    })  ])}