在某些場景下你可能需要render渲染函式帶來的完全程式設計能力來解決不太容易解決的問題，特別是要動態選擇生成標籤和元件型別的場景。

動態標籤

根據props來生成標籤的場景

<template>
  <div>
    <div v-if="level === 1"> <slot></slot> </div>
    <p v-else-if="level === 2"> <slot></slot> </p>
    <h1 v-else-if="level === 3"> <slot></slot> </h1>
    <h2 v-else-if="level === 4"> <slot></slot> </h2>
    <strong v-else-if="level === 5"> <slot></slot> </stong>
    <textarea v-else-if="level === 6"> <slot></slot> </textarea>
  </div>
</template>
 

其中level是data中的變數，可以看到這裡有大量重複程式碼，如果邏輯複雜點，加上一些繫結和判斷就更復雜了，這裡可以利用render函式來對要生成的標籤加以判斷。

使用render方法根據引數來生成對應標籤可以避免上面的情況。

<template>
  <div>
    <child :level="level">Hello world!</child>
  </div>
</template>
 
<script type='text/javascript'>
  import Vue from 'vue'
  Vue.component('child', {
    render(h) {
      const tag = ['div', 'p', 'strong', 'h1', 'h2', 'textarea'][this.level]
      return h(tag, this.$slots.default)
    },
    props: {
      level: {  type: Number,  required: true  } 
    }
  })   
  export default {
    name: 'hehe',
    data() { return { level: 3 } }
  }
</script>
 

動態元件

當然render函式還有很多用法，比如要使用動態元件，除了使用:is之外也可以使用render函式

<template>
  <div>
    <button @click='level = 0'>嘻嘻</button>
    <button @click='level = 1'>哈哈</button>
    <hr>
    <child :level="level"></child>
  </div>
</template>
 
<script type='text/javascript'>
  import Vue from 'vue'
  import Xixi from './Xixi'
  import Haha from './Haha'
  Vue.component('child', {
    render(h) {
      const tag = ['xixi', 'haha'][this.level]
      return h(tag, this.$slots.default)
    },
    props: { level: { type: Number, required: true } },
    components: { Xixi, Haha }
  })
  export default {
    name: 'hehe',
    data() { return { level: 0 } }
  }
</script>
 

• 伯樂線上 - Vue使用中的小技巧