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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
js获取图片大小的函数代码
Sep 20 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
angular中的cookie读写方法
Aug 02 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 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
PHP函数学习之PHP函数点评
2012/07/05 PHP
深入php-fpm的两种进程管理模式详解
2013/06/03 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
Python中生成Epoch的方法
2017/04/26 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
大学生应聘自荐信
2013/10/11 职场文书
电影建党伟业观后感
2015/06/01 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
详解 TypeScript 枚举类型
2021/11/02 Javascript