render函数(渲染函数)
render和template是一样的作用，render提供的内置函数可以简化代码操作，render函数比template更接近编译器
template只封装了html代码
render(createElement) createElement是一个函数，需要3个可选参数： 第一个参数：标签名称 第二个参数：给当前标签绑定的属性对象 第三个属性：给当前标签插入的子元素数组 '' this.$slots.default实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../vue.js"></script> <script> window.onload=function(){ //子组件 Vue.component('my-child',{ data(){ return { } }, props:{ num:{ type:Number, required:true } }, render(createElement){ //createElement是一个函数 //参数：标签名称，属性对象，子元素数组 return createElement('h'+this.num,{ //将绑定给当前元素的所有属性写在对象中 style:{ color:'blue', } },['default--',this.$slots.default]) } /*template:` <div> <h1 v-if='num==1'> <slot></slot> </h1> <h2 v-else-if='num==2'> <slot></slot> </h2> <h3 v-else-if='num==3'> <slot></slot> </h3> <h4 v-else-if='num==4'> <slot></slot> </h4> <h5 v-else-if='num==5'> <slot></slot> </h5> <h6 v-else> <slot></slot> </h6> </div> `*/ }) var app=new Vue({ el:'#app', data:{ }, components:{//父组件 'my-parent':{ data(){ return { num:2, } }, template:` <div> <h1>my-parent</h1> <my-child :num='num'>hello</my-child> </div> ` } } }) } </script> </head> <body> <div id="app"> <my-parent></my-parent> </div> </body> </html>