vue中的render函数

vue中的render函数的使用

我们先看一个例子：

render: function (createElement) {return createElement('h1', this.blogTitle)
}
相当于：
<h1>{{ blogTitle }}</h1>

vue中的render函数，它返回的是一个虚拟节点vnode，也就是我们要渲染的节点。
重点看一下createElement参数

createElement(// 参数一：{String | Object | Function} 必填项（就是你要渲染的最外层元素）'div',// 参数二：{Object} 可选参数（就是你创建元素的属性）{ class:'red'},// 参数三：{String | Array} 可选参数（就是你创建元素的子元素）'uu盘'// 或者['uu盘',createElement('h1','加油！'),createElement(MyComponent, {props: {someProp: 'foobar'}})]
)

我们详细看下 参数二：

{// 与 `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
}

vue2 小例子

# 父组件
<template><div><self :render="render"></self></div>
</template>
<script>
import self from '@/components/self'
export default {components:{self},data() {return {render:h=>{return h('div',{class:'red'},'nihao')}}},
}
</script>
<style>.red {color: red;}
</style># 子组件
<script>
export default {name: "SelfText",props: {render: {type: Function,default() {return {};}}},render(h) {return this.render(h);}
};
</script>

vue3 小例子

# 父组件
<template><div><self :render="render"></self></div>
</template>
<script>
import self from '@/components/self'
export default {components:{self},data() {return {render:h=>{return h('div',{class:'red'},'nihao')}}},
}
</script>
<style>.red {color: red;}
</style># 子组件
<script>
import { h } from 'vue'
export default {props: {render: {type: Function,default() {return {};}}},render() {return this.render(h);}
};
</script>

在vue3中，我们还可以使用setup来返回一个渲染的函数

<script>
import { h } from 'vue'
export default {setup() {return ()=>h('div',{class:'red'},'nihaonihao')}
}
</script>
<style>.red {color: red;}
</style>

页面的显示效果如下：

了解更多，请看官网render

vue中的render函数相关推荐

vue中的render函数、h（）函数、函数式组件
一.什么是render 官网:用于编程式地创建组件虚拟 DOM 树的函数. 在我们使用webpack脚手架创建项目时,都能在main.js中看到一个render函数 import Vue from ' ...
vue中的render函数介绍
render函数是什么简单的说,在 vue 中我们使用模板HTML语法组建页面的,使用 render 函数我们可以用js语言来构建DOM. 因为vue是虚拟DOM,所以在拿到template模板时也 ...
Vue中的 h 函数
Vue中的 h 函数在了解 h 函数之前,我们需要先了解虚拟DOM, 什么是虚拟DOM? 虚拟DOM 是使用JS 对象模拟真实的DOM结构,用JavaScript 对象描述DOM 的层次结构.D ...
vue 执行函数this_在vue中使用回调函数,this调用无效的解决
let self = this //使用新变量替换this,以免this无效 //updatestudentinfotoserver是一个将本身部分数据异步上传的接口,接收三个参数,其中第一个是数据, ...
vue中class绑定函数
vue中class绑定函数 vue+class类应用函数,增加class类名相关博客: v-for循环.v-if 动态判断+动态赋值+操作class类:(计算属性)强制绑定函数以上就是关于&quo ...
mounted钩子函数_怎样实现Vue中mounted钩子函数获取节点高度
这次给大家带来怎样实现Vue中mounted钩子函数获取节点高度,实现Vue中mounted钩子函数获取节点高度的注意事项有哪些,下面就是实战案例,一起来看一下. 遇到的问题最近在开发一个Vue的项 ...
Vue中使用find函数
Vue中使用find函数 find函数基本使用方法: // An highlighted block this.result = this.imgItems.find(item => item. ...
Vue 中的 Render 全面详解 (渲染函数 JSX)
相信大家都或多或少的在 code 中见过或使用过 Render,如果你对它还是一脸懵逼,那就快上车!今天就带你来盘它.附 Element 表格自定义全选示例. 文章目录一.Render 的资料简介 ...
详解在vue项目中使用render函数
Vue 推荐在绝大多数情况下使用模板来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力.这时你可以用渲染函数,它比模板更接近编译器. 基础如何使用: rend ...

vue中的render函数

vue中的render函数的使用

vue中的render函数相关推荐

最新文章

热门文章