Vue-render方法

看了官网的渲染函数render，https://cn.vuejs.org/v2/guide/render-function.html，对于刚接触的话，可能会懵逼的，会不知道啥意思。后面话 根据资料和文档  写下自己的见解  虽然有点粗糙

Vue.component('anchored-heading', {
  /*
  @params createElement  声明工具函数的名称；
    接受三个参数
    ElementName:设定抽象语法树根节点元素名称； string   比如 p,h2,div等html标签元素
    ElementProperty:设定根节点元素的属性； Object 给标签元素添加属性样式方法等 {style : {}, on : {}, attrs : [],class : []}
    ChildNode:设定子节点； String | Array 给标签添加子元素  可以是一个字符串 也是一个 createElement组成的数组
  @returns {VNode}
  */
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name 标签名称
      {
        style : {
            fontSize : 10px,
        },
        on : {
            动作: 方法
            click : function(){}
        }
      },
       //第三个参数可以传文本 也是 工具方法
      //文本的话
      ‘我是元素的子元素’,
      // 工具方法, 也就是多个子元素
     [
         createElement(ElementName,ElementProperty,ChildNode),
         createElement(ElementName,ElementProperty,ChildNode),
     ]
    )
  }
 
})

 在render的createElement  里面 不仅可以渲染一个  也可以添加多个元素，但最外层就要用个盒子包裹起来  有点类似HTML的布局方式  只不过这个是用JavaScript来代替渲染绘画