render 函数讲解

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

render 函数的返回值（VNode）

VNode（即：虚拟节点），也就是我们要渲染的节点。

render 函数的参数（createElement）

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

createElement 函数的返回值（VNode）

createElement 函数的返回值是 VNode（即：虚拟节点）。
createElement 函数的参数（三个）

结合代码

 /*** render: 渲染函数* 参数: createElement* 参数类型: Function*/render: function (createElement) {let _this = this['$options'].parent // 我这个是在 .vue 文件的 components 中写的，这样写才能访问thislet _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

⚠️ 从 2.6.0 开始，官方文档推荐使用作用域插槽访问所有 $slots

render 函数讲解相关推荐

【Vue】render函数使用和详解
前言在平时编程时,大部分是通过template来创建html.但是在一些特殊的情况下,使用template方式时,就无法很好的满足需求,在这个时候就需要通过JavaScript 的编程能力来进行操 ...
VUE进阶篇Part9（render函数）
这里介绍一下render函数. 作用:使用render函数就不需要在template中一点点的写html了,可以通过函数去构建,实际上render函数就是用来构建一个组件的这里分为以下几点去讲解,每 ...
render函数和redirect函数的区别+反向解析
render函数和redirect函数的区别+反向解析 1.视图函数:一定是要包含两个对象的(render源码里面有HttpResponse对象) request对象:----->所有的请求 ...
avascript中的this与函数讲解
徐某某一个半路出家的野生程序员 javascript中的this与函数讲解前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大 ...
render函数高级组件jsx基本使用
前言在学习了解组件复用的时候查看资料,看到了mixins,extend方法同时也查到了高级函数(Higher-Order Components)和jsx等字眼.听上去hoc和jsx有种高级的感觉,那 ...
vue.js - advance - render 函数小抄
vue.js推荐使用的扩展名为vue的组件模板,可以让标签的属性和内容都变得动态,这是很强大也很已用的能力.但是,如果我需要标签名本身都是可以动态的话,怎么办? 比如我希望提供一个标签,可以根据属性值 ...
vue之Render函数
(1)什么是Render函数先来看一个场景,在博客网中,一般有一级标题.二级标题.三级标题...,为了方便分享url,它们都做成了锚点,点击后,会将内容加载网址后面,以#分隔. 例如'特性'是一个& ...
linux stat函数讲解
stat函数讲解表头文件: #include <sys/stat.h> #include <unistd.h> 定义函数: int st ...
MySql UNIX_TIMESTAMP和FROM_UNIXTIME函数讲解
MySql UNIX_TIMESTAMP和FROM_UNIXTIME函数讲解 by:授客 QQ:1033553122 1. unix_timestamp(date)将时间转换为时间戳,如果参数为空,则 ...

render 函数讲解

render 函数讲解

render 函数的返回值（VNode）

render 函数的参数（createElement）

createElement 函数的返回值（VNode）

createElement 函数的参数（三个）

结合代码

render 函数讲解相关推荐

最新文章

热门文章