官网文档: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