Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。
主要就是为了避免重复使用某些节点
比如我们想自己实现不同的标题来作为我们的模板
<h1>
<a name="hello-world" href="#hello-world">
Hello world!
</a>
</h1>
我们用render
函数来实现这个功能
Vue.component(\'anchored-heading\', {
render: function (createElement) {
return createElement(
\'h\' + this.level, // 标签名称
this.$slots.default // 子节点数组
)
},
props: {
level: {
type: Number,
required: true
}
}
})