怎么在vue中使用render函數(shù)

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

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

render函數(shù)

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

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

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

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

官網(wǎng)實例

//未使用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 標簽名稱
   this.$slots.default // 子組件中的陣列
  )
 },
 props: {
  level: {
   type: Number,
   required: true
  }
 }
})

說明

區(qū)別：

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

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

第一個參數(shù)（必要參數(shù)）：主要用于提供DOM的html內(nèi)容，類型可以是字符串、對象或函數(shù)
第二個參數(shù)（類型是對象，可選）：用于設(shè)置這個DOM的一些樣式、屬性、傳的組件的參數(shù)、綁定事件之類
第三個參數(shù)（類型是數(shù)組，數(shù)組元素類型是VNode，可選）：主要是指該結(jié)點下還有其他結(jié)點，用于設(shè)置分發(fā)的內(nèi)容，包括新增的其他組件。注意，組件樹中的所有VNode必須是唯一的

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

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

 <div class="btn btn-success" v-if="type === 'success'">{{ text }}</div>
 <div class="btn btn-danger" v-else-if="type === 'danger'">{{ text }}</div>
 <div class="btn btn-warning" v-else-if="type === 'warning'">{{ text }}</div>

這樣寫在按鈕樣式少的時候完全沒有問題，但是試想，如果需要的按鈕樣式有十多個。那么template寫死的方式就顯得很無力了。遇上類似這樣的情況，使用render函數(shù)可以說最優(yōu)選擇了。

根據(jù)實際情況改寫按鈕組件

首先render函數(shù)生成的內(nèi)容相當于template的內(nèi)容，故使用render函數(shù)時，在.vue文件中需要先把template標簽去掉。只保留邏輯層。

export default {
 props: {
  type: {
   type: String,
   default: 'normal'
  },
  text: {
   type: String,
   default: 'normal'
  }
 },
 computed: {
  tag() {
   switch (this.type) {
    case 'success':
     return 1;
    case 'danger':
     return 2;
    case 'warning':
     return 3;
    default:
     return 1;
   }
  }
 },
 render(h) {
  return h('div', {
   class: {
    btn: true,
    'btn-success': this.type === 'success',
    'btn-danger': this.type === 'danger',
    'btn-warning': this.type === 'warning'
   },
   domProps: {
    innerText: this.text
   },
   on: {
    click: this.handleClick
   }
  });
 },
 methods: {
  handleClick() {
   console.log('-----------------------');
   console.log('do something');
  }
 }
};

根據(jù)組件化思維，能抽象出來的東西絕不寫死在邏輯上。這里的clickHandle函數(shù)可以根據(jù)按鈕的type類型觸發(fā)不同的邏輯，就不多敘述了。

然后在父組件調(diào)用

<Button type="danger" text="test"></Button>

使用jsx

是的，要記住每個參數(shù)的類型同用法，按序傳參實在是太麻煩了。那么其實可以用jsx來優(yōu)化這個繁瑣的過程。

 render() {
  return (
   <div
    class={{
     btn: true,
     'btn-success': this.type === 'success',
     'btn-danger': this.type === 'danger',
     'btn-warning': this.type === 'warning'
    }}
    onClick={this.handleClick}>
    {this.text}
   </div>
  );
 },

關(guān)于怎么在vue中使用render函數(shù)就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

當前名稱：怎么在vue中使用render函數(shù)
鏈接地址：http://www.muchs.cn/article42/gehshc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、自適應(yīng)網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)頁設(shè)計公司、面包屑導(dǎo)航、Google

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容