render

在我们的组件中，可以使用render来代替template

常规组件

<template><div></div>
</template>

render组件

export default {render (createElement) {return createElement('div', {}, "")}
}

createElement

在render函数中有一个函数参数，这个函数调用时，可以传入三个参数

标签名
配置 Object 可选
子节点 String|Array 可选

如果第二个参数不写，直接写第三个，如createElement(“div”, “内容”)，则这个内容会直接被当成第三个参数（第二个参数如果不是对象，则被当成第三个参数使用）

createElement('标签名(支持组件名)', {// 与 `v-bind:class` 的 API 相同，// 接受一个字符串、对象或字符串和对象组成的数组'class': {foo: true,bar: false},// 与 `v-bind:style` 的 API 相同，// 接受一个字符串、对象，或对象组成的数组style: {color: 'red',fontSize: '14px'},// 普通的 HTML attributeattrs: {id: 'foo'},// 组件 propprops: {myProp: 'bar'},// DOM propertydomProps: {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}}],// 作用域插槽的格式为// { name: props => VNode | Array<VNode> }scopedSlots: {default: props => createElement('span', props.text)},// 如果组件是其它组件的子组件，需为插槽指定名称slot: 'name-of-slot',// 其它特殊顶层 propertykey: 'myKey',ref: 'myRef',// 如果你在渲染函数中给多个元素都应用了相同的 ref 名，// 那么 `$refs.myRef` 会变成一个数组。refInFor: true
}, '内容'|[])
// 数组中可以继续包含createElement()作为它的子节点

functional

如果我们想要在render函数中获取到组件中的相关属性，如props，我们可以设置functional: true

export default {functional: true,props: {key: "value"},render (creaetElement, ctx) {// 这个ctx中就包含了我们的props等相关内容}
}

只有在我们想要实现对应自己封装可复用组件时，需要通过js配置传递过去渲染结构，这个时候，我们才会使用render

render函数的使用相关推荐

render函数和redirect函数的区别+反向解析
render函数和redirect函数的区别+反向解析 1.视图函数:一定是要包含两个对象的(render源码里面有HttpResponse对象) request对象:----->所有的请求 ...
render函数高级组件jsx基本使用
前言在学习了解组件复用的时候查看资料,看到了mixins,extend方法同时也查到了高级函数(Higher-Order Components)和jsx等字眼.听上去hoc和jsx有种高级的感觉,那 ...
vue.js - advance - render 函数小抄
vue.js推荐使用的扩展名为vue的组件模板,可以让标签的属性和内容都变得动态,这是很强大也很已用的能力.但是,如果我需要标签名本身都是可以动态的话,怎么办? 比如我希望提供一个标签,可以根据属性值 ...
vue之Render函数
(1)什么是Render函数先来看一个场景,在博客网中,一般有一级标题.二级标题.三级标题...,为了方便分享url,它们都做成了锚点,点击后,会将内容加载网址后面,以#分隔. 例如'特性'是一个& ...
gym中render()函数在远端server运行的解决方案
近来在跑gym上的环境时,遇到了如下的问题: pyglet.canvas.xlib.NoSuchDisplayException: Cannot connect to "None" ...
「后端小伙伴来学前端了」Vue脚手架中 render 函数
前言上一篇文章写了:「后端小伙伴来学前端了」分析Vue脚手架结构简单说明了Vue的脚手架结构,但是上篇文章还欠了个小点没有说完,就在这篇文章中补齐.就是所谓的render函数. 一.main.js ...
Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
vue iframe 中写script_vue: 单文件组件 render函数
使用vue-cli创建的vue项目,如何在这种项目中使用组建? 首先创建项目.启动项目我们再来了解一下目录结构,src文件夹是写逻辑代码的地方,public是最终渲染到浏览器的地方. 在public ...
vue render函数
Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数. 比如如下我想要实现如 ...
你需要知道的vue2 jsx render函数
通常开发vue我们使用的是模板语法,其实还有和react相同的语法,那就是render函数,同样支持jsx语法. Vue 的模板实际是编译成了 render 函数. 0 传统的createElemen ...

render函数的使用

render

createElement

functional

render函数的使用相关推荐

最新文章

热门文章