rander 函数

rander 函数的参数必须是 createElement ，createElement 是 Vue 定义的一个函数。

createElement 函数的第一个参数（必传）

第一个参数可以是 String | Object | Function 。
如果参数是 String 类型，是一个 html 标签：

如果参数是 Object 类型，是一个含有数据选项的对象：

Vue.component('my-component', {
  render(createElement){
    return createElement({
      template: '
水调歌头
'
    })
  }
})

如果参数是 Function 类型，是一个返回含有数据选项的对象的方法：

Vue.component('my-component', {
  render(createElement){
    var fn = ()=>{
      return {
        template: '
水调歌头
'
      }
    }
    return createElement(fn())
  }
})

createElement 函数的第二个参数（可选）

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

Vue.component('my-component', {
  render(createElement){
    return createElement({
      template: '
我是红色
'
    }, {
      'class': {
        foo: true,
        baz: false
      },
      style: {
        color: 'red',
        fontSize: '16px'
      },
      // 正常的 html 特性
      attrs: {
        id: 'foo',
        src: 'http://baidu.com'
      },
      // 用来写原生的 Dom 属性
      domProps: {
        innerHTML: '我是蓝色'
      }
    })
  }
})

createElement 函数的第三个参数（可选）

第三个参数代表子节点，可以是 String | Array 。
String 是文本节点，Array 是包含 VNode 的数组。

Vue.component('my-component', {
  render(createElement){
    return createElement('div', [
      createElement('h1', '我是h1标题'),
      createElement('h6', '我是h6标题')
    ])
  }
})

this.$slots 在 render 函数中的应用

  
    
我是第一段内容
    
我是第二段内容
    
我是标题
    
我是底部内容
  

在 render 函数中使用 props 传递数据

  点击切换图片
  

  

v-model 在 render 函数中的使用

  
  
{{name}}

作用域插槽在 render 函数中的使用

函数化组件的应用

this.text === context.props.text
this.$slots.default === context.children