vue 中的 render 函数作用详解


Posted in Javascript onFebruary 28, 2020

render 函数作用

vue渲染函数文档第一遍看的晕晕乎乎的,再看看写写终于清晰了。建议配合文档阅读,本文也是根据文档加上自己的理解。

注:本文代码都是在单文件组件中编写。代码地址

render 函数作用

render 函数 跟 template 一样都是创建 html 模板的,但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复,这时候就可以用 render 函数。

官网例子:子组件想要根据父组件传递的 level 值(1-6)来决定渲染标签 h 几。具体代码可以看文档。

render 函数讲解

render 函数即渲染函数,它是个函数,它的参数也是个函数——即 createElement,我们重点来说 createElement 参数。

render 函数的返回值(VNode)

VNode(即:虚拟节点),也就是我们要渲染的节点。

render 函数的参数(createElement)

createElement 是 render 函数 的参数,它本身也是个函数,并且有三个参数。

createElement 函数的返回值(VNode)

createElement 函数的返回值是 VNode(即:虚拟节点)。

createElement 函数的参数(三个)

一个 HTML 标签字符串,组件选项对象,或者解析上述任何一种的一个 async 异步函数。类型:{String | Object | Function}。必需。

一个包含模板相关属性的数据对象你可以在 template 中使用这些特性。类型:{Object}。可选。
子虚拟节点 (VNodes),由 createElement() 构建而成,也可以使用字符串来生成“文本虚拟节点”。类型:{String | Array}。可选。

结合代码

/**
 * render: 渲染函数
 * 参数: createElement
 * 参数类型: Function
 */
 render: function (createElement) {
  let _this = this['$options'].parent // 我这个是在 .vue 文件的 components 中写的,这样写才能访问this
  let _header = _this.$slots.header  // $slots: vue中所有分发插槽,不具名的都在default里
 
  /**
  * createElement 本身也是一个函数,它有三个参数
  * 返回值: VNode,即虚拟节点
  * 1. 一个 HTML 标签字符串,组件选项对象,或者解析上述任何一种的一个 async 异步函数。必需参数。{String | Object | Function} - 就是你要渲染的最外层标签
  * 2. 一个包含模板相关属性的数据对象你可以在 template 中使用这些特性。可选参数。{Object} - 1中的标签的属性
  * 3. 子虚拟节点 (VNodes),由 `createElement()` 构建而成,也可以使用字符串来生成“文本虚拟节点”。可选参数。{String | Array} - 1的子节点,可以用 createElement() 创建,文本节点直接写就可以
  */
  return createElement(    
   // 1. 要渲染的标签名称:第一个参数【必需】   
   'div',  
   // 2. 1中渲染的标签的属性,详情查看文档:第二个参数【可选】
   {
    style: {
     color: '#333',
     border: '1px solid #ccc'
    }
   },
   // 3. 1中渲染的标签的子元素数组:第三个参数【可选】
   [
    'text',  // 文本节点直接写就可以
    _this.$slots.default, // 所有不具名插槽,是个数组
    createElement('div', _header)  // createElement()创建的VNodes
   ]
  )
 }

可以看下控制台中打印出来的 $slots

vue 中的 render 函数作用详解

下面在通过具体代码看下render函数怎么用

例:           

render:(h) => {
              return h('div',{








 //给div绑定value属性
                props: {
                  value:''
                },









 //给div绑定样式









 style:{











width:'30px'









 }, 









 //给div绑定点击事件

                on: {
                  click: () => {
                    console.log('点击事件')
                  }
                },

              })
            }

深入 data 对象

有一件事要注意:正如在模板语法中,v-bind:class 和 v-bind:style ,会被特别对待一样,在 VNode 数据对象中,下列属性名是级别最高的字段。该对象也允许你绑定普通的 HTML 特性,就像 DOM 属性一样,比如 innerHTML (这会取代 v-html 指令)。

{
 // 和`v-bind:class`一样的 API
 'class': {
 foo: true,
 bar: false
 },
 // 和`v-bind:style`一样的 API
 style: {
 color: 'red',
 fontSize: '14px'
 },
 // 正常的 HTML 特性
 attrs: {
 id: 'foo'
 },
 // 组件 props
 props: {
 myProp: 'bar'
 },
 // DOM 属性
 domProps: {
 innerHTML: 'baz'
 },
 // 事件监听器基于 `on`
 // 所以不再支持如 `v-on:keyup.enter` 修饰器
 // 需要手动匹配 keyCode。
 on: {
 click: this.clickHandler
 },
 // 仅对于组件,用于监听原生事件,而不是组件内部使用
 // `vm.$emit` 触发的事件。
 nativeOn: {
 click: this.nativeClickHandler
 },
 // 自定义指令。注意,你无法对 `binding` 中的 `oldValue`
 // 赋值,因为 Vue 已经自动为你进行了同步。
 directives: [
 {
  name: 'my-custom-directive',
  value: '2',
  expression: '1 + 1',
  arg: 'foo',
  modifiers: {
  bar: true
  }
 }
 ],
 // Scoped slots in the form of
 // { name: props => VNode | Array<VNode> }
 scopedSlots: {
 default: props => createElement('span', props.text)
 },
 // 如果组件是其他组件的子组件,需为插槽指定名称
 slot: 'name-of-slot',
 // 其他特殊顶层属性
 key: 'myKey',
 ref: 'myRef'
}

总结

到此这篇关于vue 的 render 函数作用详解的文章就介绍到这了,更多相关vue render 函数作用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
jQuery中的常用事件总结
Dec 27 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
JavaScript中的类继承
Nov 25 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
使用Vue生成动态表单
Nov 26 Javascript
微信小程序动态添加和删除组件的现实
Feb 28 #Javascript
浅析Vue 中的 render 函数
Feb 28 #Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 #Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 #Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 #jQuery
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 #Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 #Javascript
You might like
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
原生js轮播特效
2017/05/18 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python实现破解猜数游戏算法示例
2017/09/25 Python
深入浅析python with语句简介
2018/04/11 Python
OpenCV 模板匹配
2019/07/10 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
手机促销活动方案
2014/02/05 职场文书
人资专员岗位职责
2014/04/04 职场文书
学生期末评语大全
2014/04/30 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers