render 函数

在render函数的方法中，参数必须是 createElement，createElement是一个function。

    Vue.component('child', {
      render: function (createElement) {
        return createElement('h' + this.level, // 标签名称
          this.$slots.default); // 子组件中的阵列
      },
      props: ['level']
    })

createElement 的第一个参数

createElement 的第一个参数是必选的，它可以是 {String | Object | Function}中的任何一种 。

• String ---- html 标签

    render: function (createElement) { 
        return createElement('h' + this.grade, // case1: String
          this.$slots.default) // 子组件中的阵列

• Object ---- 一个含有数据选项的对象

render: function (createElement) {
        return createElement({ //case2: Object
          template: '<h2>h2</h2>'
        })
      }

• Function ----- 方法返回含有数据选项的对象

render: function (createElement) {
        let func = function () {
          return {
            template: '<h3>h3</h3>' // case3: Function
          }
        };
        return createElement(func())
      }

createElement 的第二个参数

第二个参数是一个包含模板相关属性的数据对象（比如 class，style，attrs，domProps 等等），只能是对象。

 render: function(createElement) {
         return createElement(
           'div',
            // createElement 第二个参数是数据对象，只能是对象。
           {    
            'class': { //  由于class 在JS 中是关键字，所以用了引号，但是实际上不加也不会报错
              active: false,
              error: true
            },
            style: {
              fontSize: '24px',
              color: '#b2d235'
            },
            attrs: { //  正常的HTML特性，比如 src
              id: 'foo'
            },
            domProps: { // 用来写原生的 DOM 属性
              innerHTML: '<p> hi ~ <p>'
            }
           }  
         )
       }
    }

createElement 的第三个参数

第三个参数也是可选 , 类型为 String 或 Array （Array用的更多一些），作为构建函数的子节点来使用的。

    render: function (createElment) {
                return createElment('div',[
                createElment('p','我是子节点')
                ])
      }

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

  render: function(createElement) {
        // debugger
         let header = this.$slots.header;
         console.log(header);
         let main = this.$slots.default;
         let footer = this.$slots.footer;
         return createElement('div',[
         createElement('header',header),
         createElement('main',main),
         createElement('footer',footer)
         ] )
       } 

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

let componentA = {
      props: ['show'],
      render: function (createElement) {
        let src;
        if (this.show) {
          src = './images/1.jpg'
        } else {
          src = './images/2.jpg'
        }
        return createElement('div', {
          style: {
            marginTop: '30px'
          }
        }, [
          createElement('img', {
            attrs: {
              src: src
            },
            style: {
              width: '400px'
            }
          })
        ])
      }
    }

v-model在render函数中的应用

    <component-a v-model = "msg" :message = "msg"></component-a>

let componentA = {
      props: ['message'],
      render: function(createElement) {
        return createElement ('input',{
          domProps: {
            value: this.message
          },
          on: {
            input: () =>{
              this.$emit('input',event.target.value)
            }
          }
        })
      }
    }

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

      <component-a >
         <template slot-scope = "prop">
           {{ prop.msg }}
         </template>
      </component-a>

    let componentA = {
      render: function(createElement) {
        return createElement('div',this.$scopedSlots.default({
        msg:'xxxxx'
      }))
      }
    }

函数化组件的应用

functional: true表示该组件无状态(没有响应式数据），无实例（没有this 上下文）

    let componentA = {
      functional: true, // functional: true,表示该组件无状态无实例
      props: ['msg'],
      render: function (createElement, context) {
        return createElement('button', {
          on: {
            'click': () => {
              console.log(context);
              console.log(context.parent); // 父组件app
              console.log(context.parent.count); //父组件的count: 0
              console.log(context.props.msg); //  传过来的msg
              console.log(this) // undefined
            }
          }
        }, '点我看控制台有什么')
      }
    }