vue中render函数使用

vue 专栏收录该内容
24 篇文章 1 订阅

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这时你可以用 render 函数,它比 template 更接近编译器。

现在我有一个需求,就是写一个自定义标题的组件,但是有标题1到标题6,那么通常会这么写组件

  <div id="app">
    <heading>
      标题
    </heading>
  </div>
  <div id="notice">
    <h1 v-if="level === 1">
      <slot></slot>
    </h1>
    <h2 v-else-if="level === 2">
      <slot></slot>
    </h2>
    <h3 v-else-if="level === 3">
      <slot></slot>
    </h3>
    <h4 v-else-if="level === 4">
      <slot></slot>
    </h4>
    <h5 v-else-if="level === 5">
      <slot></slot>
    </h5>
    <h6 v-else-if="level === 6">
      <slot></slot>
    </h6>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.common.dev.js"></script>

  <script>
    let vm = new Vue({
      el: '#app',
      data () {
        return {
          msg: 'hello world'
        }
      },
      components: {
        'Heading': {
          template: '#notice',
          props: {
            level: {
              type: Number,
              default: 1
            }
          }
        }
      }
    })
  </script>

在这种场景中使用 template 并不是最好的选择:首先代码冗长,但是我们通过 render 函数来创建会更好

  <div id="app">
    <heading>
      标题
    </heading>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.common.dev.js"></script>

  <script>
    let vm = new Vue({
      el: '#app',
      data () {
        return {
          msg: 'hello world'
        }
      },
      components: {
        'Heading': {
          render(createElement) {
            return createElement(
              'h' + this.level,   // 标签名称
              this.$slots.default // 子元素数组
            )
          },  
          props: {
            level: {
              type: Number,
              default: 1
            }
          }
        }
      }
    })
  </script>

关于render函数的具体用法,请参考官网介绍:网址

  • 2
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页

打赏

前端精髓

小礼物走一走,来CSDN关注我

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值