当前位置: 首页 > news >正文

vue中render函数的作用和参数(vue2中render函数用法)

render 函数是 Vue2.x 新增的一个函数、主要用来提升节点的性能,它是基于 JavaScript 计算。使用 Render 函数将 Template 里面的节点解析成虚拟的 Dom 。Vue 推荐在绝大多数情况下使用模板来创建 HTML。然而在一些场景中,需要 JavaScript 的完全编程能力。这时可以用渲染函数render,它比模板更接近编译器。在vue脚手架的main.js文件中,存在这样一段代码:
在这里插入图片描述
意思是对vue实例的配置,其中render函数的作用是,将h创建的Node节点信息return返回给Vue.js底层处理文件中的beforeMount()生命周期钩子函数,让其将Node节点信息在界面中渲染出来

render函数语法如下:

render: (h,context)=>{return h(‘el’,{‘css’},vnodeArr)}

render函数带有两个参数,分别是h和context

(1) h是一个createElement函数,用于创建节点信息,其内有三个参数

h(‘el’,‘css’,vnodeArr)

其中,el表示当前节点的标签,比如可以是div、span等;css是当前节点标签的css样式;vodeArr是当前节点标签中的子标签,指的是比如:如下div节点中的span标签

<div><span></span>
</div>

(2)

context代表当前节点下的所有信息,使用场景:在需要对当前节点中子标签进行改动时,使用context.slots.default 拿到当前节点下所有的子节点信息,这些信息是以数组形式存储的,可以通过数组的方式找到相应的Node节点,然后对其进行修改。如下是对context.slots信息的打印在这里插入图片描述
render函数需要返回一个h函数创建的Node节点,接收到这个返回信息的函数是vue实例生命周期钩子函数中的beforeMount函数,在接收到信息之后将其渲染

render函数使用示例:

案例环境:

1.封装了一个类似于ElementUi中面包屑的节点组件BreadcrumbItem,代码如下:

<template><span><route-link v-if='to' :to='to'><slot/></route-link><span v-else><slot/></span></span>
</template>
<script>
export default {props:{to:{type:[String,Object],default:''
}
}
}
</script>

2.使用环境

<Breadcrumb><Breadcrumb-item>首页</Breadcrumb-item>><Breadcrumb-item>>活动列表</Breadcrumb-item>><Breadcrumb-item>>活动详情</Breadcrumb-item>><Breadcrumb-item>>活动详情</Breadcrumb-item>>
</Breadcrumb>

3.想要达到的效果

即:在Breadcrumb组件下使用Breadcrumb-item组件,需要进行一个操作,在Breadcrumb-item标签之后加入一个>的字体图标

解决方式如下:

<script>
export default {name:'Breadcrumb',functional:true,  // 以函数的方式注册组件render:(h,context)=>{const vnodeArr = []  //创建一个新数组,存入处理后的节点数组context.slots().default.forEach((item,index,arr)=>{//对原本该组件下的节点数组进行遍历,然后对每一个节点的位置做判断,如果符合条件,就在该节点后添加一个字体图标的新节点vnodeArr.push(item) if(index !== arr.length-1){vnodeArr.push(h('i',{class:'el-icon-arrow-right'})) // h函数创建字体图标节点}})return h('span',{},vnodeArr) //将Breadcrumb组件认定为一个span标签,并将刚才处理出来的子节点数组添加到该span标签中,最终得出渲染的结果}
}
</script>
http://www.lryc.cn/news/21668.html

相关文章:

  • 基于Istio的高级流量管理二(Envoy流量劫持、Istio架构、高级流量管理)
  • Sharding-Springboot-mybatis-plus整合(三)-inline策略
  • 编码的基本概念
  • 函数指针与指针函数的区别
  • 死锁的四个必要条件以及如何避免死锁
  • 浏览器多线程到事件循环机制
  • Lambda表达式的本质
  • 类的加载过程(生命周期)
  • 2023最新谷粒商城笔记之MQ消息队列篇(全文总共13万字,超详细)
  • 多变量线性回归模型
  • php 基于ICMP协议实现一个ping命令
  • Java基本数据类型
  • English Learning - L2 语音作业打卡 Day2 2023.2.22 周三
  • 45. 跳跃游戏 II
  • 应届生Java面试50题线程篇(含解析)
  • 【数据库】第七章 数据库设计
  • Burp Suite 常用模块简介
  • QML Item和Rectangle详解
  • 常见前端基础面试题(HTML,CSS,JS)(六)
  • 深度学习 李沐报错
  • 【JAVA程序设计】(C00104)基于Springboot的家庭理财管理系统——有文档
  • 【第五章 AOP概述,底层原理,AOP术语,切入点表达式,AOP操作(基于注解方式,基于xml配置文件)】
  • 面试官: 你知道 JWT、JWE、JWS 、JWK嘛?
  • 基于企业微信应用消息的每日早安推送
  • 【数字IC基础】黑盒验证、白盒验证、 灰盒验证
  • 管理的本质是达成目标
  • 【数字IC基础】IC(Integrated Circuit,集成电路)常用缩写
  • JavaScript 高级1 :面向对象
  • C语言结构体对齐
  • Bootstrap系列之导航