求教vue render函数的使用

Question

<template>
  <div ref="wrapper">{{text}}</div>
</template>
<script>
export default {
  render: function(createElement) {
    var func = function() {
      return {
        template: "<div>哈哈哈哈哈</div>"
      };
    };
    return createElement(func());
  },
  data() {
    return {
      text: ''
    };
  },
  mounted() {
      this.text = '<div @click="cesi1"></div>'
  },
  methods: {
    cesi1() {
      console.log(123);
    }
  }
};
</script>

请问如何将render挂载到<div ref="wrapper">{{text}}</div>中呢？
查了些文档，实在没有明白render如何使用，还望指点，谢谢！

Answer 1

http://jsrun.net/4J2Kp/edit 四种可以挂载的方式吧。

1. el
2. $mount
3. 子组件
4. render

当然 vue-loader 可以理解为把 template 标签编译成 render。

然后 render 、 template 、 el 三个属性提供的模板也是有优先级的。就是另一个兄弟说的那样

Answer 2

同一单文件组件中,template和render只能有一个存在

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