9. render函数

9.1 render函数初步了解

template下只允许有一个子节点
实现一个属性level值（1-3）的更改对应组件中的标题从h1-h3更改的案例：
使用vue组件方法

<div id="app">
 <my-count :level="level">我是内容</my-count>
</div>
<template id="tem">
 <div>
     <h1 v-if="level === 1">
         <slot></slot>
       </h1>
       <h2 v-if="level === 2">
         <slot></slot>
       </h2>
       <h3 v-if="level === 3">
         <slot></slot>
       </h3>
 </div>
</template>  
<script>
Vue.component('my-count',{
 template: '#tem',
 props: ['level']
})
var app = new Vue({
   el: '#app',
   data: {
     level: 1
   }
})
</script>

使用render函数的方法代替template

<div id="app">
  <my-count :level="level">我是内容</my-count>
</div>
<script>
  //使用组件中的render方法
  Vue.component('my-count',{
    render: function(createElement){
      return createElement('h'+this.level,this.$slots.default)
    },
    props:['level']
  })
  var app = new Vue({
      el: '#app',
      data: {
        level: 1
      }
  })
</script>  

9.2 render函数中的createElement参数，以及返回值createElement函数的第一个参数

在render函数的方法中，参数必须是createElement,createElement的类型是function
createElement函数的第一个参数可以是 String | Object | Function

Vue.component('child',{
  // ----第一个参数必选
  //String--html标签
  //Object---一个含有数据选项的对象
  //FUnction---方法返回含有数据选项的对象
  render: function (createElement) {
    alert(typeof createElement)
    // return createElement('h1')
    // return createElement({
    // template:'<div>锄禾日当午</div>'
    // })
    var domFun = function () {
      return {
        template:'<div>锄禾日当午</div>'
      }
    }
    return createElement(domFun());
  }
});

9.3 render函数中的返回值函数createElement的第二个参数

Vue.component('my-count',{
  // ----第二个参数可选,第二个参数是数据对象----只能是Object
  render: function (createElement) {
    return createElement({
      template: '<div>hello world!</div>'
    },{
      style:{
        color: 'red',
        fontSize: '16px'
      },
      class:{
        far: false,
        bar: true
      },
      //正常的html特性
      attrs:{
        id: '#z',
        title: 'linlin'
      },
      //用来写原生的Dom属性
      domProps:{
        innerHTML:'<span>aaaaaa</span>'
      }
    })
  }
})

9.3 render函数中的返回值函数createElement的第三个参数

第三个参数也是可选===String | Array—作为我们构建函数的子节点来使用 的

Vue.component('my-count',{
  // ----第三个参数是可选的，可以是 String | Array---代表子节点
  render: function (createElement) {
    return createElement('div',[
      createElement('h1','我是标题'),
      createElement('h2','我是标题')
    ])
  }
})

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

第三个 参数存的就是VNODE
createElement(‘header’,header), 返回的就是VNODE
var header = this.$slots.header; //–这返回的内容就是含有VNODE的数组

<div id="app">
  <my-count>
    <p>锄禾日当午</p>
    <p>汗滴禾下土</p>
    <span slot="footer">我是文章的最后一句</span>
    <h1 slot="header">我是标题</h1>
  </my-count>
</div>
<script>
  //使用组件中的render方法
Vue.component('my-count',{
  render: function(createElement){
    var header = this.$slots.header;
    var footer = this.$slots.footer;
    var main = this.$slots.default;
    return createElement('div',[
      createElement('header',header),
      createElement('main',main),
      createElement('footer',footer)
    ])
  }
})

通过上面的代码能将h1放在第一行显示，然后是两个p里面的内容，最后显示footer，显示效果如下

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

<div id="app">
  <button @click="switchShow">点击切换美女</button>
  <my-count :show="show"></my-count>
</div>
<script>
Vue.component('my-count',{
  render: function(createElement){
    let imgSrc = '';
    if(this.show === true){
      imgSrc = '1.jpg'
    }else{
      imgSrc = '2.jpeg'
    }
    return createElement('img',{
      attrs:{
        src: imgSrc
      },
      style:{
        width: '340px',
        height: '500px'
      }
    })
  },
  props: ['show']
});
var app = new Vue({
    el: '#app',
    data: {
      show: true
    },
    methods: {
      switchShow: function(){
        this.show = !this.show
      }
    }
})
</script>  

9.6 v­model在render函数中的使用

<div id="app">
  <!-- <my-count :name="name" @input="showName"></my-count> <br> -->
  <my-count :name="name" v-model="name"></my-count> <br>
  {{name}}
</div>
<script>
Vue.component('my-count',{
  props: ['name'],
  render: function(createElement){
    let _this =this;//指的就是当前的VUE实例
    return createElement('input',{
      domProps: {
        value: _this.name
      },
      on: {
        input: function(event){
          var a = this;
          //此处的this指的是什么？指的就是window
          _this.$emit('input',event.target.value)
        }
      }
    })
  }
});
var app = new Vue({
    el: '#app',
    data: {
      name: 'jack'
    },
    methods: {
      showName: function(value){
        return this.name = value;
      }
    }
})
</script>  

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

<div id="app">
  <my-count>
    <template slot-scope="prop">
      {{prop.text}}
      {{prop.msg}}
    </template>
  </my-count>
</div>
<script>
Vue.component('my-count',{
  props: ['name'],
  render: function(createElement){
    //就相当于<div><slot text="我是组件传递过来的数据" msg="scopetext"></slot></div>
    return createElement('div',this.$scopedSlots.default({
      text: '我是子组件传递过来的数据',
      msg: 'scopetext'
    }))
  }
});

9.7 函数化组件的应用

使用context的转变——­
对于上面案例代码
// this.text----context.props.text
//this.$slots.default-----context.children

<div id="app">
  <my-count value="haha"></my-count>
</div>
<script>
Vue.component('my-count',{
  props: ['value'],
  functional: true,//表示该组件无状态，无实例（不能用this）
  render: function(createElement,context){
    return createElement('button',{
      on: {
        click: function(){
          console.log(context.props.value)
        }
      }
    },'点击我')
  }
});
var app = new Vu

补充：createElement可以使用h来缩写
如：

render: h => h(App)
//是下面内容的缩写：

render: function (createElement) {
    return createElement(App);
}
进一步缩写为(ES6 语法)：

render (createElement) {
    return createElement(App);
}
再进一步缩写为：

render (h){
    return h(App);
}
按照 ES6 箭头函数的写法，就得到了：

render: h => h(App);