知食记
搜索文档…
渲染函数
写一个只能通过 level prop 动态生成标题 (heading) 的组件时,你可能很快想到这样实现:
1
<script type="text/x-template" id="anchored-heading-template">
2
<h1 v-if="level === 1">
3
<slot></slot>
4
</h1>
5
<h2 v-else-if="level === 2">
6
<slot></slot>
7
</h2>
8
<h3 v-else-if="level === 3">
9
<slot></slot>
10
</h3>
11
<h4 v-else-if="level === 4">
12
<slot></slot>
13
</h4>
14
<h5 v-else-if="level === 5">
15
<slot></slot>
16
</h5>
17
<h6 v-else-if="level === 6">
18
<slot></slot>
19
</h6>
20
</script>
Copied!
1
Vue.component('anchored-heading', {
2
template: '#anchored-heading-template',
3
props: {
4
level: {
5
type: Number,
6
required: true
7
}
8
}
9
})
Copied!
这里用模板并不是最好的选择:不但代码冗长,而且在每一个级别的标题中重复书写了 <slot></slot>,在要插入锚点元素时还要再次重复。
虽然模板在大多数组件中都非常好用,但是显然在这里它就不合适了。那么,我们来尝试使用 render 函数重写上面的例子:
1
Vue.component('anchored-heading', {
2
render: function (createElement) {
3
return createElement(
4
'h' + this.level, // 标签名称
5
this.$slots.default // 子节点数组
6
)
7
},
8
props: {
9
level: {
10
type: Number,
11
required: true
12
}
13
}
14
})
Copied!
看起来简单多了!
最近更新 1yr ago
复制链接