vue中render函數(shù)的使用詳解

更新時(shí)間：2018年10月12日 13:39:57 作者：Choo

這篇文章主要介紹了vue中render函數(shù)的使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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)容，類型可以是字符串、對象或函數(shù)
第二個(gè)參數(shù)（類型是對象，可選）：用于設(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)。首先，你可能會想到如下實(shí)現(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>

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

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

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

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

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

 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>
  );
 },

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: