rander 函数

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

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

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

<div id="app">
  <my-component></my-component>
</div>
<script>
  Vue.component('my-component', {
    render(createElement){
      return createElement('h1')
    }
  })
  var app = new Vue({
    el: '#app'
  })
</script>

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

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

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

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

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

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

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

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

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

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

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

<div id="app">
  <my-component>
    <p>我是第一段内容</p>
    <p>我是第二段内容</p>
    <h1 slot="header">我是标题</h1>
    <h5 slot="footer">我是底部内容</h5>
  </my-component>
</div>
<script>
  Vue.component('my-component', {
    render(createElement){
      return createElement('div', [
        createElement('header', this.$slots.header),
        createElement('main', this.$slots.default),
        createElement('footer', this.$slots.footer)
      ])
    }
  })
  var app = new Vue({
    el: '#app'
  })
</script>

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

<div id="app">
  <button @click="switchColor">点击切换图片</button>
  <br>
  <my-component :show="show"></my-component>
</div>
<script>
  Vue.component('my-component', {
    props: ['show'],
    render(createElement){
      let imgsrc = this.show ? '001.jpg' : '002.jpg'
      return createElement('img', {
        attrs: {
          src: imgsrc
        },
        style: {
          width: '600px',
          height: '400px'
        }
      })
    }
  })
  var app = new Vue({
    el: '#app',
    data: {show: true},
    methods: {
      switchColor(){
        this.show = !this.show
      }
    }
  })
</script>

v-model 在 render 函数中的使用

<div id="app">
  <my-component :name="name" v-model="name"></my-component>
  <br>{{name}}
</div>
<script>
  Vue.component('my-component', {
    props: ['name'],
    render(createElement){
      var _this = this
      return createElement('input', {
        domProps: {
          value: _this.name
        },
        on: {
          input(event){
            _this.$emit('input', event.target.value)
          }
        }
      })
    }
  })
  var app = new Vue({
    el: '#app',
    data: {name: '喵喵'}
  })
</script>

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

<div id="app">
  <my-component>
    <template scope="prop">
      {{prop.text}}
      {{prop.msg}}
    </template>
  </my-component>
</div>
<script>
  Vue.component('my-component', {
    props: ['name'],
    render(createElement){
      return createElement('div', this.$scopedSlots.default({
        text: '我是子组件传递过来的数据',
        msg: 'message'
      }))
    }
  })
  var app = new Vue({
    el: '#app'
  })
</script>

函数化组件的应用

<div id="app">
  <my-component :value="msg"></my-component>
</div>
<script>
  Vue.component('my-component', {
    functional: true, // 表示当前的 Vue 实例无状态，无实例。
    props: ['value'],
    render(createElement, context){
      return createElement('button', {
        on: {
          click(){
            console.log(context)
            console.log(context.parent)
            console.log(context.props.value)
          }
        }
      }, '点我')
    }
  })
  var app = new Vue({
    el: '#app',
    data: {
      msg: '我是父组件的内容'
    }
  })
</script>

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