vue-render函数

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。vue提供了render函数大大的提高了JavaScript的编程能力，虽然在日常的使用中是比较少见的但是理解render函数对应加深对Vue组件的使用都是很有帮助的。下面我们就针对render函数进行探讨。

render函数提供一个createElement，而createElement可接受三个参数具体情况如下：

第一个参数

第一个参数可以是HTML标签名，组件或者函数都可以。

{
   type: String || Object || Function,
   required: true
}

🌰

<template>
  <div class="dome">
    <div id="app">
    </div>
  </div>
</template>

<script>
  Vue.components('dom', {
    render: function (createElement) {
      return createElement('div');
    }
  });
  new Vue({
    el: '#app'
  });</script>

第二个参数

第二个参数为创建元素的一些属性。

{
  type: Object,
  required: false
}

🌰

Vue.components('dom', {
    render: function (createElement) {
      return createElement('div'， {
        'class': {
          container: true
        },
        style: {
          cursor: 'pointer'
        },
        domProps: {
          innHTML: 'baz'
        }
      });
    }
  });
  new Vue({
    el: '#app'
  });

第三个参数

第三个参数为创建元素的子节点。

{
  type: String || Array,
  required: false
}

🌰

<script>
  Vue.components('dom', {
    render: function (createElement) {
      return createElement('div', [
        createElement('h1', '主标'),
        createElement('h2', '副标')
      ]);
    }
  });
  new Vue({
    el: '#app'
  });
</script>

上述就是render几个参数的具体信息，而用render函数生成的组件的子元素就在$slots.default中。

Vue提供的实例方法在render函数中使用

<template>
  <div class="dome">
    <div id="app">
      <dom-input
        :value="pValue"
        @input="val=>pValue=val">
      </dom-input>
    </div>
  </div>
</template>

<script>
  Vue.components('dom-input', {
    render: function (createElement) {
      const _this = this;
      return createElement('div', {
        domPopps: {
          value: _this.name
        },
        on: {
          input: function () {
            _this.$emit('input', event.taget.value);
          }
        }
      });
    },
    props: {
      value: String
    }
  });
  new Vue({
    el: '#app',
    data: {
      pValue: ''
    }
  });
</script>

上面的例子中我们创建了一个input组件，在组件中当输入的触发了input事件emit了input的value；而在外层中接受了这个value让pValue的值等于value。而pValue又通过props把值传入input组件中从而实现了类似v-model的数据绑定。

通过了上面render函数的一个例子我们看到了props和事件的触发的使用。

最后编辑于：2018.03.18 17:16:11