《vue-rander函数》

1、template下只允许有一个子节点

<template id='hdom'>
    <div>
    <h1 v-if='copy==1'>
      <slot></slot>
    </h1>
    <h2 v-if='copy==2'>
      <slot></slot>
    </h2>
    <h3 v-if='copy==3'>
      <slot></slot>
    </h3>
    </div>
  </template>

尝试render

  <child :copy='copy'>
        我是哆啦A梦
      </child>

  Vue.component('child',{
   render(createElement){
      return createElement('h'+this.copy,this.$slots.default);
   },
    props:['copy']
})
  new Vue({
    el:'#app',
    data:{
     copy:1,
    },
  })

2、render函数的第一个参数

在render函数的方法中，参数必须是createElement,createElement的类型是ifunction

render函数的第一个参数可以是

• String(给我们就是html标签)

return createElement('h1')

• Object(含有数据选项的对象)

return createElement({
       template:'<div>tt</div>',
})

• Function(返回含有数据选项的对象)

var demo  = function(){
   return {
     template:'<div>tt</div>',
   }
 }
 return createElement(demo());

2.1、render函数的第二个参数 可选

• Object(只能是含有数据选项的对象)

Vue.component('child',{
    render(createElement){
      return createElement({
          template:'苦行僧'                 
       },{
        'class':{
          foo:true,
          ccc:false,
        },
        style:{
          color:'red',
          frontSize:'16px',
        },
       //正常的html特性
        attrs:{
          id:'foo',
          src:'https://baidu.com'
        },
         //用来写原生的dom数据
        domProps:{
               innerHTML:'<span style="color:blue;font-size:16px;">我是蓝色</span>',            
         }
                           
      })
    }
  })

2.2、render函数的第三个参数

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

 Vue.component('child',{
   render(createElement){
   return createElement('div',[createElement('h1','我是H1'),createElement('h6','我是H6')])
  }
 })

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

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

<app2>
  <p>每当我感觉身体快被抽空</p>
  <p>到凌晨4点才收工</p>
  <h1 slot='header'>going go</h1>
  <h5 slot="footer">Tizzy T</h5>
</app2>

 Vue.component('app2',{
   render(createElement){
     let header = this.$slots.header;
     let main = this.$slots.default;
     let footer = this.$slots.footer;
     return createElement('div',[
       createElement('header',header),
       createElement('main',main),
       createElement('footer',footer)
     ]);
   }
 })

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

 <button @click='changeShow'>点击切换美女</button>
 <span>{{show}}</span>
 <app2 :show="show">
 </app2>

Vue.component('app2',{
  props:['show'],
  render(createElement){
    var imgsrc;
    if(this.show){
        imgsrc = '002.2b7dbe38.png'
    }else{
        imgsrc = '003.9e9efe28.jpg'
    }
    return createElement('img',{
        attrs:{
            src: imgsrc
       },
        style:{
            width:'600px',
            height:'400px'
        }
    });
  },
})
 new Vue({
    el:'#app',
    data:{
     show:false,
    },
    methods:{
      changeShow(){
        this.show = !this.show;
      }
    }
    
  })

5、v-model在render函数中的使用

<child :msg='msg' v-model="msg"> </child><br>
 <span>{{msg}}</span>

  Vue.component('child',{
    render(createElement){
      let self = this;
      return createElement('input',{
        domProps:{
          value:self.msg
        },
        on:{
          input(event){
            self.$emit('input',event.target.value)
          }
        },
        
      })
    },
  })
       

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

<child>
  <template scope='sm'>
    {{sm.text}}
  </template>
</child>

 Vue.component('child',{
   render(createElement){
     return createElement('div',this.$scopedSlots.default({
       text:'我是child组件传递过来的数据',
     }))
   }
 })

7、函数化组件的应用

使用context的转变

// this.text----context.props.text 
//this.$slots.default-----context.children 

functional: true,表示该组件无状态无实例