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