第九章 render函数

9.1 render函数初步了解

template下只允许有一个子节点

<template id="hdom">
    <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>

//是用vue组件定义
// Vue.component('child',{
//     props:['level'],
//     template:'#hdom'
// })

//使用render函数进行定义组件
Vue.component('child',{
    render:function (createElement) {
        return createElement('h'+this.level,
        this.$slots.default);
    },
    props:['level']
})

9.2 render函数的第一个参数

在render函数的方法中，参数必须是 createElement,createElement的类型是function
render函数的第一个参数可以是 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函数的第二个参数

Vue.component('child',{
// ----第二个参数可选,第二个参数是数据对象----只能是Object
    render: function (createElement) {
        return createElement({
            template:'<div>我是8px</div>'
        },{
          style: {
             fontSize: '8px'  
          }
        }
     })
    }
});

9.4 render函数的第三个参数

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

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

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

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

Vue.component('my-component',{
    render:function (createElement) {
        var header = this.$slots.header; //--这返回的内容就是含有=vnode的数组
        var main = this.$slots.default;
        var footer = this.$slots.footer;
        return createElement('div',[
            createElement('header',header),
            createElement('main',main),
            createElement('footer',footer)
        ]);
    }
})

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

<div id="app" >
    {{show}}
    <my-component :show="show"> </my-componen>
</div>

//需求：点击按钮切换美女图片

Vue.component('my-component',{
    props:['show'],
    render:function (createElement) {
        var imgsrc;
        if(this.show){
            imgsrc = 'img/001.jpg'
        }else{
            imgsrc = 'img/002.jpg'
        }
        return createElement('img',{
            attrs:{
                src: imgsrc
            },
            style:{
                width:'600px',
                height:'400px'
             }
        });
    }
})

9.7 v­-model在render函数中的使用

<!--<my-component :name="name" @input="showName"></my-component>-->

<my-component :name="name" v-model="name"></my-component>

<br> {{name}}
//需求：

var app = new Vue({
      el: '#app',
      data: {
        name: 'JACK'
      },
      components: {
        'my-component': {
          render: function(createElement){
            var _this = this
            return createElement('input',{
              domProps: {
                value: this.name
              },
              on: {
                input: function(event){
                  _this.$emit('input',event.target.value)
                }
              }
            })
          },
          props:['name']
        }
      },
      // methods: {
      //   showname: function(val){
      //     this.name = val
      //   }
      // }
    })

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

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

9.9 函数化组件的应用

使用context的转变——­

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

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

  <div id="app">
    <my-component text="aaaa">

    </my-component>
  </div>


var app = new Vue({
      el: '#app',
      components: {
        'my-component': {
          functional: true,  // 函数化组件的应用，表示vue实例无状态，无实例（不能用 this）
          render: function(createElement,context){
            return createElement('button',{
              on: {
                click: function(){
                  console.log(context) // 表示本身组件
                  console.log(context.parent) //表示父组件,当下是vue实例
                  console.log(context.props.text) //表示本身组件的数据
                }
              }
            },'点击我')
          }
        }
      }
    })