当前位置:首页 > 前端 > Vue.js

Vue Render渲染函数 & JSX的使用

Vue.js 2019-09-05

Vue Render渲染函数 & JSX的使用

1、概述

Vue 推荐使用在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器。
让我们看一个比较简单的例子,这个例子里 render 函数很实用。假设我们要生成一些带锚点的标题:

  1. <h1>
  2. <a name="hello-world" href="#hello-world">
  3. Hello world!
  4. </a>
  5. </h1>

对于这个列子,平时我们会这样来:

  1. <template>
  2. <div>
  3. <h1 v-if="level === 1">
  4. <slot></slot>
  5. </h1>
  6. <h2 v-else-if="level === 2">
  7. <slot></slot>
  8. </h2>
  9. <h3 v-else-if="level === 3">
  10. <slot></slot>
  11. </h3>
  12. <h4 v-else-if="level === 4">
  13. <slot></slot>
  14. </h4>
  15. <h5 v-else-if="level === 5">
  16. <slot></slot>
  17. </h5>
  18. </div>
  19. </template>
  20. <script>
  21. export default {
  22. props: {
  23. level: {
  24. type: Number,
  25. required: true
  26. }
  27. }
  28. }
  29. </script>

以上的写法并不是最好的选择:不但代码冗长,而且在每一个级别的标题中重复书写了 <slot></slot>,在要插入锚点元素时还要再次重复。下面看下render 的写法。

2、Vue render 写法

  1. <script>
  2. export default {
  3. name: 'renderTest',
  4. render: function (createElement) {
  5. return createElement(
  6. 'h' + this.level, // 标签名称
  7. this.$slots.default // 子节点数组
  8. )
  9. },
  10. props: {
  11. level: {
  12. type: Number,
  13. required: true
  14. }
  15. }
  16. }
  17. </script>

是不是一下子简洁了好多?

< 上一篇 下一篇 >
湘ICP备15005320号-1 似懂非懂 Powered by doyo. 网站地图
返回顶部