vue 的渲染函数

加入有这么一个需求,就是根据level 的属性值,动态的 展示h1-h6 你咋写

你也许会这样写:

Headings2.vue

<template>
  <div>
    <h1 v-if="this.level==='1'">
      <slot></slot>
    </h1>
    <h2 v-if="this.level==='2'">
      <slot></slot>
    </h2>
    <h3 v-if="this.level==='3'">
      <slot></slot>
    </h3>

    <!-- h4,h5,h6 略 -->
  </div>
</template>

<script>
export default {
  props: {
    level: {
      type: String,
      required: true,
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

使用如下:

展示结果:

这都没有任何问题,可惜这样写太啰嗦了,这个时候,可以用渲染函数写法!

可以实现一模一样的功能!

行,渲染函数初步使用,就写到这里,大家有个印象就行了

h 函数,接受三个参数, 1 标签名, 2 属性,3, 子节点(vNode 数组)

©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页