假设我们要实现根据level的大小设置标题大小这一功能,使用模板组件我们会这样写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<div id='app'>
<anchoredheading :level="2">Hello world!</anchoredheading>
</div>
</body>
<script type="text/x-template" id="anchored-heading-template">
<h1 v-if="level === 1">
<slot></slot>
</h1>
<h2 v-else-if="level === 2">
<slot></slot>
</h2>
<h3 v-else-if="level === 3">
<slot></slot>
</h3>
<h4 v-else-if="level === 4">
<slot></slot>
</h4>
<h5 v-else-if="level === 5">
<slot></slot>
</h5>
<h6 v-else-if="level === 6">
<slot></slot>
</h6>
</script>
<script type="text/javascript">
Vue.component('anchoredheading', {
template: '#anchored-heading-template',
props: {
level: {
type: Number,
required: true
}
}
})
var vm = new Vue({
el: '#app'
})
</script>
</html>
这里用模板并不是最好的选择:不但代码冗长,而且在每一个级别的标题中重复书写了 <slot></slot>
,在要插入锚点元素时还要再次重复。
虽然模板在大多数组件中都非常好用,但是显然在这里它就不合适了。那么,我们来尝试使用 render
函数重写上面的例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<div id="app">
<anchoredheading v-bind:level="4">Hello world!</anchoredheading>
</div>
<script type="text/javascript">
Vue.component('anchoredheading', {
render: function (createElement) {
return createElement(
'h' + this.level, // tag name 标签名称
this.$slots.default // 子组件中的阵列
)
},
props: {
level: {
type: Number,
required: true
}
}
})
new Vue({
el: "#app"
})
</script>
</html>
而render: h => h(App)是ES6语法还原后就是
//createElement就是h,一个形参,没有具体意义,可以随意改变书写
render:(function(createElement){
return createElement(App);