9. render函数

9.1 render函数初步了解

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

 我是内容

  

使用render函数的方法代替template

  我是内容

  

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:'
锄禾日当午
'
    // })
    var domFun = function () {
      return {
        template:'
锄禾日当午
'
      }
    }
    return createElement(domFun());
  }
});

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

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

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的数组

  
    
锄禾日当午
    
汗滴禾下土
    我是文章的最后一句
    
我是标题
  

  

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

  
   

  {{name}}

  

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