vue中Render函数使用介绍

本文介绍了Vue中Render函数的使用,相较于template,Render函数在处理复杂场景时能减少代码冗余,提高效率。通过createElement函数,可以动态生成标签并添加属性。Vue的模板实际上是被编译成AST语法树,进而转换为render函数生成虚拟DOM节点。尽管render函数使用较复杂,但结合jsx可以简化这一过程。
摘要由CSDN通过智能技术生成

一、前言

        我刚在官网上研究了半天有关render的文档,我总结一下我个人的理解。 render 函数跟 template 一样都是创建 html 模板的,但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复,这时候就可以用 render 函数,render函数更接近编译器。

        配合官方文档,总结一下我的心得

二、render

        拿官网的例子为例 ,通过父传子level,动态生成标题

<template>  
<div>
  <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&
  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值