模板缺陷

  1. 模板的最大特点是扩展难度大，不易扩展，可能会造成逻辑冗余；
    <Level :type="1">哈哈1</Level>
<Level :type="2">哈哈2</Level>
<Level :type="3">哈哈3</Level>
  2. Level 组件需要对不同的 type 产生不同的标签；
    <template>
  <h1 v-if="type==1"><slot></slot></h1>
  <h2 v-else-if="type==2"><slot></slot></h2>
  <h3 v-else-if="type==3"><slot></slot></h3>
</template>
<script>
  export default {
    props: {
      type: {
        type: Number
      }
    }
  };
</script>

使用 Render 函数

复杂的逻辑变得非常简单

export default {
  render(h) {
    return h("h" + this.type, {}, this.$slots.default);
  },
  props: {
    type: {
        type: Number
    }
  }
};
打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 模板缺陷
  2. 2. 使用 Render 函数