這篇文章主要介紹了vue如何使用render函數(shù)，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、外貿(mào)營銷網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)崇禮,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

render 函數(shù)

在某些場景下你可能需要render 渲染函數(shù)帶來的完全編程能力來解決不太容易解決的問題，特別是要動態(tài)選擇生成標(biāo)簽和組件類型的場景。

1 動態(tài)標(biāo)簽

1. 一般情況

比如根據(jù)props來生成標(biāo)簽的場景

其中l(wèi)evel是data中的變量，可以看到這里有大量重復(fù)代碼，如果邏輯復(fù)雜點(diǎn)，加上一些綁定和判斷就更復(fù)雜了，這里可以利用 render 函數(shù)來對要生成的標(biāo)簽加以判斷。

2.優(yōu)化

使用 render 方法根據(jù)參數(shù)來生成對應(yīng)標(biāo)簽可以避免上面的情況。

 import Vue from 'vue'
 Vue.component('child', {
 render(h) {
  const tag = ['div', 'p', 'strong', 'h2', 'h3', 'textarea'][this.level]
  return h(tag, this.$slots.default)
 },
 props: {
  level: { type: Number, required: true } 
 }
 }) 
 export default {
 name: 'hehe',
 data() { return { level: 3 } }
 }

2 動態(tài)組件

當(dāng)然render函數(shù)還有很多用法，比如要使用動態(tài)組件，除了使用 :is 之外也可以使用render函數(shù)

 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 } }
 }

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue如何使用render函數(shù)”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!