render note

render

• 类型：(createElement: () => VNode) => VNode

• 详细：

  字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

  如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。

  Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

1. render方法的实质就是生成template模板； 
2. 通过调用一个方法来生成，而这个方法是通过render方法的参数传递给它的； 
3. 这个方法有三个参数，分别提供标签名(组件)，标签相关属性，标签内部的html内容 
4. 通过这三个参数，可以生成一个完整的模板 

备注：

1. render方法可以使用JSX语法，但需要Babel plugin插件；
2. render方法里的第三个参数可以使用函数来生成多个组件（特别是如果他们相同的话），只要生成结果是一个数组，且数组元素都是VNode即可；

<div id="app">
    <child v-bind:level="2">Hello world!</child>
</div>
 
<script type="text/javascript">
 
Vue.component('child', {
    render: function (createElement) {
        return createElement(
            'h' + this.level, // tag name 标签名称
            this.$slots.default // 子组件中的阵列
        )
    },
    props: {
        level: {
            type: Number,
            required: true
        }
    }
})
 
new Vue({
    el: "#app"
})
 
</script>

1. 这里的代码和上面区别之处有两点： 
   其一，没有显式的模板内容，而是通过render方法生成； 
   其二，使用了createElement方法。
2. 关于createElement方法，他是通过render函数的参数传递进来的，这个方法有三个参数: 
   第一个参数主要用于提供dom的html内容，类型可以是字符串、对象或函数。比如”div”就是创建一个 <div>标签 
   第二个参数（类型是对象）主要用于设置这个dom的一些样式、属性、传的组件的参数、绑定事件之类，具体可以参考 官方文档 里这一小节的说明 
   第三个参数（类型是数组，数组元素类型是VNode）主要用于说是该结点下有其他结点的话，就放在这里。

        比如说，有需要分发的标签 <slot>，则通过 this.$slots.default 来获得，或许还有其他组件之类，可能需要被使用的，应该也是放在这里。 

        个人初步理解是，在原本被替换的地方，例如例上面代码中的 <child> 标签，在其下的每个次一级标签为一个元素，放在 this.$slots.default这个数组中，例如上面的话，这个数组只有一个元素，但是以下代码： 

<child v-bind:level="2"><div>Hello</div><div> world!</div></child> 

        这个数组中则有两个元素，分别是 <div>Hello</div> 和 <div> world!</div>例如 this.$slots.default[0] 则表示第一个标签。

        另外，假如这2个元素中间有空格、换行符之类，那么数组中则有三个元素，那个空格、换行符则为第二个元素。这个属性有点类似dom的 childNodes属性，不是单纯以标签才算作子节点的。（但注意，不是完全相同）

        有时候，我们可能想在里面添加其他的组件，例如将abc组件注册在里面。那么，我们首先要注册这个abc组件，然后将abc组件在数组里通过createElement来创建标签，只有通过这样的方式创建的abc标签，才能被abc组件使用。单纯输入字符串"<abc></abc>" 这样是不可以的。

此时会渲染一个h1标签，innerHTML是你好：

render(createElement){
    //console.log(typeof createElement)//function
    return createElement('h1','你好')
}

第三个参数，该组件的内容，可以是子节点:

<script>
export default {
  props: {tag:String},
  data() {
    return {
      people: ["tom", "jack", "aric"],
    };
  },
  render(createElement) {
    return createElement(
      this.tag,
      {},
      this.people.map((name) =>
        createElement(
          "li",
          {
            attrs: { class: "test" },
            on: {
              click: () => {
                console.log(123);
              },
            },
          },
          `${name}`
        )
      )
    );
  },
};
</script>

<style lang="">
</style>

el-row：

export default {
  name: 'ElRow',

  componentName: 'ElRow',

  props: {
    tag: {
      type: String,
      default: 'div'
    },
    gutter: Number,
    type: String,
    justify: {
      type: String,
      default: 'start'
    },
    align: String
  },

  computed: {
    style() {
      const ret = {};

      if (this.gutter) {
        ret.marginLeft = `-${this.gutter / 2}px`;
        ret.marginRight = ret.marginLeft;
      }

      return ret;
    }
  },

  render(h) {
    return h(this.tag, {
      class: [
        'el-row',
        this.justify !== 'start' ? `is-justify-${this.justify}` : '',
        this.align ? `is-align-${this.align}` : '',
        { 'el-row--flex': this.type === 'flex' }
      ],
      style: this.style
    }, this.$slots.default);
  }
};