Vue2系列 — 渲染函数 (render + createElement)

本文主要是介绍Vue2系列 — 渲染函数 (render + createElement)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

官网文档：https://v2.cn.vuejs.org/v2/guide/render-function.html

1 render 函数

render 函数
不使用模板，使用 js 生成虚拟 dom

2 createElement()

接受的参数：

• 参数1 节点类型
• 参数2 attribute
• 参数3 子节点

3 DEMO

<template><div class="container"><!-- <WangEditorDemo></WangEditorDemo> --><!-- <div v-hello>123</div> --><!-- <input v-limit-input-number> --><!-- <el-input v-model="name" v-limit-input></el-input> --><!-- <IDBDemo></IDBDemo> --><anchored-heading :level="1">Hello world!</anchored-heading><anchored-heading :level="2">Hello world!</anchored-heading></div>
</template>

main.js

Vue.component('anchored-heading', {render: function (createElement) {return createElement(// 参数1 节点类型 {String | Object | Function}'h' + this.level,   // 标签名称// 参数2 attribute {Object} 可选{'class': {foo: true},style: {color: 'red'},},// 参数3 子节点 {String | Array} 可选'123' // 文本节点)},props: {level: {type: Number,required: true}}
})

4 使用 JavaScript 代替模板功能(v-if/v-for/v-model…)

官方文档：https://v2.cn.vuejs.org/v2/guide/render-function.html

这篇关于Vue2系列 — 渲染函数 (render + createElement)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---