這篇文章給大家介紹怎么在vue中使用render函數(shù)，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)公司是一家專業(yè)的成都網(wǎng)站建設(shè)公司，我們專注成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營銷、企業(yè)網(wǎng)站建設(shè)，賣友情鏈接，一元廣告為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計(jì)到用戶體驗(yàn)提高，創(chuàng)新互聯(lián)力求做到盡善盡美。

render函數(shù)

vue通過 template 來創(chuàng)建你的 HTML。但是，在特殊情況下，這種寫死的模式無法滿足需求，必須需要js的編程能力。此時(shí)，需要用render來創(chuàng)建HTML。

render方法的實(shí)質(zhì)就是生成template模板；

通過調(diào)用一個(gè)方法來生成，而這個(gè)方法是通過render方法的參數(shù)傳遞給他的；

通過這三個(gè)參數(shù)，可以生成一個(gè)完整的模板

官網(wǎng)實(shí)例

//未使用render函數(shù)
Vue.component('anchored-heading', {
 template: '#anchored-heading-template',
 props: {
  level: {
   type: Number,
   required: true
  }
 }
})

//使用render函數(shù)
Vue.component('anchored-heading', {
 render: function (createElement) {
  return createElement(
   'h' + this.level,  // tag name 標(biāo)簽名稱
   this.$slots.default // 子組件中的陣列
  )
 },
 props: {
  level: {
   type: Number,
   required: true
  }
 }
})

說明

區(qū)別：

• 沒有顯示的模板內(nèi)容，而是通過render方法生成

• 使用了createElement方法

createElement方法，通過render函數(shù)的參數(shù)傳遞進(jìn)來，有三個(gè)參數(shù)：

• 第一個(gè)參數(shù)（必要參數(shù)）：主要用于提供DOM的html內(nèi)容，類型可以是字符串、對(duì)象或函數(shù)

• 第二個(gè)參數(shù)（類型是對(duì)象，可選）：用于設(shè)置這個(gè)DOM的一些樣式、屬性、傳的組件的參數(shù)、綁定事件之類

• 第三個(gè)參數(shù)（類型是數(shù)組，數(shù)組元素類型是VNode，可選）：主要是指該結(jié)點(diǎn)下還有其他結(jié)點(diǎn)，用于設(shè)置分發(fā)的內(nèi)容，包括新增的其他組件。注意，組件樹中的所有VNode必須是唯一的

什么情況下適合使用render函數(shù)

在一次封裝一套通用按鈕組件的工作中，按鈕有四個(gè)樣式(success、error、warning、default)。首先，你可能會(huì)想到如下實(shí)現(xiàn)

 {{ text }}