渲染函数 - 知食记

写一个只能通过 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!
看起来简单多了！

以前

mixin

下一个

组件间通信

最近更新 2yr ago

复制链接