使用render渲染的便利之处

定义一个Title组件，在使用的时候，通过父组件传值level去定义这个title是h1~h6

 

1、components/Title.vue：

<template>
  <h1 v-if="level===1">
    <a href="">
      <slot></slot>
    </a>
  </h1>
  <h2 v-else-if="level===2">
    <a href="">
      <slot></slot>
    </a>
  </h2>
  <h3 v-else-if="level===3">
    <a href="">
      <slot></slot>
    </a>
  </h3>
  <h4 v-else-if="level===4">
    <a href="">
      <slot></slot>
    </a>
  </h4>
  <h5 v-else-if="level===5">
    <a href="">
      <slot></slot>
    </a>
  </h5>
  <h6 v-else-if="level===6">
    <a href="">
      <slot></slot>
    </a>
  </h6>
</template>
<script>
export default {
  props: ['level']
}
</script>

2、使用

<template>
  <div id="app">
    <Title :level='1'>标题一</Title>
    <Title :level='2'>标题二</Title>
    <Title :level='3'>标题三</Title>
    <Title :level='4'>标题四</Title>
    <Title :level='5'>标题五</Title>
    <Title :level='6'>标题六</Title>
  </div>
</template>
<script>
import Title from '@/components/Title'
export default {
  components: { Title }
}
</script>

 

 

可以发现，在定义Title组件时使用了大量的if、if-else，这里可以使用render进行渲染，代码会变得简洁

components/title.js：

export default {
  props: ['level'],
  render(h) {
    const tag = 'h' + this.level
    return <tag><a href=''>{this.$slots.default}</a></tag>
  }
}